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Jason Strimpel 


我 在 多 年 前 就 开始 了 Web 开发 的 职业 生涯 ， 当 时 我 在 加 州 大 学 圣地 亚 哥 分 校 担 任 行政 助 
理 。 我 的 工作 职责 之 一 就 是 维护 部 门 网 站 。 那 个 年 代 的 Web 开发 还 是 站 点 管理 员 、 表 格式 
布局 和 CGI 程序 的 天 下 ， 且 网 景 浏览 器 仍然 是 浏览 器 领域 中 的 佼佼 者 。 当 时 ， 我 的 专业 知 
识 还 有 很 多 不 足 ， 也 缺乏 经 验 。 我 清晰 地 记得 ， 当 时 我 很 担心 ， 如 有 果 我 发 送 的 电子 邮件 中 
存在 拼写 错误 ， 收 件 人 就 会 看 到 它们 被 红色 下 划 线 标记 出 来 ， 正 如 我 看 到 他 们 的 拼写 错误 
时 一 样 。 幸 运 的 是 ， 我 的 上 司 很 耐心 ， 他 说 我 的 邮件 中 并 没有 拼写 错误 ， 并 向 我 传授 了 关 
于 网 站 开发 的 许多 要 点 。 


转眼 15 年 过 去 了 ， 如 今 我 在 各 大 会 议 上 发 表演 讲 ， 管 理 开源 项 目 ， 合 著 图 书 ， 成 了 这 个 
领域 的 “专家 ”。 有 时候 我 会 问 自己 :“ 我 是 如 何 取 得 今天 的 成 就 的 ? ”这 个 问题 的 答案 绝 
不 仅仅 是 任 由 时 间 一 天 天 地 流逝 一 一 至 少 不 完 全 是 虚度 时 光 。 


为 什么 需要 同 构 JavaScript 


到 目前 为 止 ， 我 的 Web 开发 之 路 的 最 后 一 站 是 沃尔玛 实验 室 的 平台 团队 ， 我 的 同 构 
JavaScript 探索 之 旅 就 是 从 这 里 开始 的 。 刚 开始 在 沃尔玛 工作 时 ， 我 被 分 配 到 了 一 个 负责 
开发 Web 新 框架 的 团队 。 这 个 框架 是 从 零 开始 开发 的 ， 其 目标 是 支撑 面向 公众 的 大 型 网 
站 。 除 了 满足 这 类 网 站 的 最 低 要 求 ， 支 持 SEO 并 优化 网 页 加 载 速度 之 外 ， 保 持 UI 工程 
师 (包括 我 在 内 ) 的 开发 愉悦 感 和 高 效率 也 非常 重要 。 很 明显 ， 为 了 更 好 地 实现 UI 工程 
师 的 目标 ， 我 们 的 首选 是 基于 现 有 的 单 页 面 应 用 (Single-Page Application,，SPA，https:// 
en.wikipedia.org/wiki/Single-page_application) 技术 进行 扩展 。 但 SPA 模型 有 一 个 问题 ， 它 
不 能 很 好 地 支持 我 们 的 最 低 要 求 ( 详 情 请 参见 下 文中 的 “完美 风暴 : 一 个 极其 平常 的 故 
事 ” 和 1.2.3 市 中 的 “ 单 页 面 Web 应 用 ”)， 所 以 我 们 最 终 选 择 采 用 同 构 的 方式 。 以 下 是 这 
样 做 的 理由 。 





































































































。 对 于 同一 个 泻 染 周期 ， 客 户 端 和 服务 器 端 可 以 使 用 同一 套 代 码 。 这 意味 着 不 需要 重复 劳 
动 ， 可 以 在 降低 界面 开发 与 维护 成 本 的 同时 提高 团队 开发 速度 。 

。 在 服务 器 端 泻 染 一 份 初始 的 HTML 代码 后 ， 用 户 会 感觉 网 页 的 加 载 速度 更 快 ， 这 是 因 
为 用 户 可 以 在 浏览 器 中 先 看 见 首 屏 泻 染 的 内 容 ， 而 无 须 等 待 应 用 资源 的 加 载 和 数据 抓 取 





完成 。 




















在 网 络 延迟 比较 严重 的 环境 中 ， 这 种 改进 页 面 预 加 载 的 方式 尤为 重要 。 











。 同 构 应 用 支持 SEO， 因为 同 构 应 用 使 用 的 URL 不 包含 # 号 片段 。 此 外 ， 在 那些 不 支持 
History API 的 浏览 器 中 , 它 可 以 (对 后 续 的 每 次 请 求 ) 优 雅 地 降级 为 服务 器 端 泻 染 的 方式 。 

。 在 支持 History API 的 浏览 器 中 ， 同 构 应 用 使 用 了 SPA 模型 的 分 布 式 泻 染 ， 因 此 后 续 请 
求 可 以 减轻 服务 器 负载 。 

。 无 论 是 在 服务 器 端 还 是 在 客户 端 ，UI 工程 师 都 可 以 完全 掌控 界面 (https://www.nczonline. 
net/blog/2013/10/07/node-js-and-the-new-web-front-end/)， 而 且 同 构 应 用 在 前 后 端 之 间 划 
分 了 明确 的 界限 ， 这 有 助 于 降低 操作 成 本 。 


以 上 是 我 们 团队 走 上 同 构 JavaScript 之 路 的 主要 原因 。 但 在 详细 介绍 同 构 JavaScript 之 前 ， 
先 交 代 一 些 背 景 知 识 是 很 有 必要 的 ， 这 可 以 帮助 你 理解 我 们 今天 所 处 的 具体 环境 。 

se 
平台 的 演进 


Web 技术 的 快速 演进 令 人 难以 想象 。 当 初 ，CSS 和 JavaScript 技术 被 引入 剖 览 器 的 目的 是 





提供 一 利 






























































交互 模型 和 关注 点 分 离 。 你 还 记得 曾 有 无 数 的 文章 提倡 结构 、 样 式 和 行为 分 离 





吗 ? 即便 在 引入 了 这 些 技术 之 后 ， 应 用 的 架构 也 并 没有 发 生 太 大 变化 。 文 档 通 过 URI 的 
形式 进行 请 求 ， 浏 览 器 解析 返回 内 容 后 ， 再 进行 渲染 。 唯 一 的 不 同 之 处 就 是 JavaScript 让 
界面 变 得 更 丰富 了 一 点 。 直 到 微软 公司 引入 一 项 被 称 为 XMLHttpRequest (https://developer. 
mozilla.org/en-US/docs/Web/API/XMLHttpRequest) 的 新 技术 ，Web 才 在 这 项 技术 的 催化 下 
演进 为 应 用 平台 。 





Ajax: 








应 用 平台 的 崛起 





尽管 很 多 前 端 工 程 师 对 微软 公司 及 其 下 浏览 右 哈 之 以 鼻 ， 但 他 们 仍然 应 当 对 微软 剑 有 一 份 
感激 之 情 。 如 果 没 有 微软 ， 前 端 工程 师 未 必 能 达到 今天 的 职业 高 度 。 如 有 果 XMLHttpRequest 
技术 没有 出 现 ，Ajax 技术 也 就 不 会 诞生 ， 如 果 没 有 Ajax， 就 不 会 有 这 么 多 修改 页 面 内 容 


的 需求 ， 














我 们 也 就 没有 必要 使 用 jQuery (https:Wjquery.com/) 。 你 猜 接 下 来 会 发 生 什么 呢 ? 











我 们 就 不 会 有 大 量 的 前 端 MV* 库 可 供 选 择 ， 单 页 面 应 用 的 模式 也 不 会 出 现 ， 进 而 History 
API 也 不 会 出 现 。 所 以 ， 下 一 次 抱怨 正 浏览 器 给 你 带 来 麻烦 时 ， 请 你 务必 对 微软 作出 客观 
评价 ， 毕 竟 微 软 改变 了 历史 进程 ， 为 今天 的 Web 应 用 商定 了 基础 ， 还 为 你 提供 了 一 个 锻炼 




















思维 的 场所 。 
x | 前 言 


Ajax: 技术 债 的 积累 

虽然 Ajax 技术 影响 了 Web 平台 的 发 展 进程 ， 但 它 也 以 技术 债 的 形式 造成 了 一 些 破 坏 性 的 
影响 。Ajax 模糊 了 以 前 清晰 定义 的 模型 。 过 去 ， 当 用 户 导航 到 一 个 新 页 面 或 者 提交 表单 数 
据 时 ， 浏 览 器 只 需 依次 发 送 请 求 、 取 得 响应 并 解析 完整 的 文档 流 。 当 Ajax 成 为 Web 开发 
的 主流 技术 后 ， 这 种 方式 完全 改变 了 。 现 在 ， 工 程 师 不 需要 向 服务 器 请 求 重新 获取 整 份 文 
档 ， 只 需要 根据 用 户 的 请 求 来 判断 是 加 载 更 多 数据 还 是 返回 另 一 个 视图 。 这 意味 着 应 用 可 
以 仅 更 新 页 面 中 的 某 个 区 域 。 这 种 特性 大 大 优化 了 客户 端 和 服务 器 端的 性 能 ， 同 时 明显 改 
善 了 用 户 体验 。 不 幸 的 是 ， 客 户 端的 应 用 架构 几乎 变 得 不 存在 了 ， 而 本 来 负责 处 理 视图 层 
的 那些 工程 师 并 疫 有 应 对 这 种 范式 转变 的 经 验 。 日 积 月 票 ， 这 些 因 素 将 应 用 的 维护 工作 变 
成 了 露 梦 。 由 于 模型 定义 变 得 模糊 ，Web 开发 从 此 经 历 了 一 段 艰难 成 长 的 时 期 。 


完美 风暴 : 一 个 极其 平常 的 故事 


想象 一 下 如 下 情景 : 你 所 在 的 团队 负责 维护 一 个 商业 应 用 的 商品 页 面 。 在 该 页 面 的 右 侧 有 
一 个 用 于 显示 用 户 点 评 的 轮 播 组 件 ， 用 该 组 件 可 以 翻 页 。 当 用 户 点 击 翻 页 按钮 时 ， 客 户 端 
会 改变 URI 并 向 服务 器 发 起 请 求 以 重新 获取 整个 商品 页 面 。 这 种 低 效 的 做 法 会 让 身 为 工 
程 师 的 你 感到 非常 苦恼 。 你 认为 没有 必要 刷新 整个 页 面 并 调用 一 个 重新 演 染 页 面 的 数据 请 
求 ， 真 正 需要 获取 的 只 是 下 一 页 评论 的 HTML 内 容 。 好 在 你 一 直 在 跟踪 行业 内 最 新 的 技术 
发 展 ， 准 备 尝试 使 用 最 近 学 习 的 Ajax 来 解决 这 个 问题 。 你 收集 了 一 些 关 于 Ajax 的 概念 证 
明 ， 并 向 上 司 推荐 了 这 项 技术 。 这 时 候 的 你 看 起 来 就 像 巫 师 一 样 。 像 其 他 技术 一 样 ， 这 项 
技术 最 终 会 正式 投入 到 生产 环境 中 。 


你 对 目前 的 成 果 感 到 非常 满意 ， 直 到 后 来 了 解 到 一 种 新 的 数据 交换 格式 。 这 种 称 为 JSON 
的 格式 受到 了 JavaScript 的 非 官 方 代言 人 Douglas Crockford (http://www.crockford.com/) 
的 极力 推荐 。 你 马上 就 觉得 目前 的 实现 不 够 完美 了 。 第 二 天 ， 你 使 用 一 种 称 为 微 模板 
(micro-templating ，http://ejohn.org/blog/javascript-micro-templating/) 的 技术 编写 了 一 份 新 
的 概念 证 明 ， 并 再 次 向 上 司 推荐 。 这 项 技术 同样 受到 了 好 评 并 再 次 投入 到 生产 环境 中 。 



































































































































此 时 普通 的 工程 师 已 经 将 你 奉 为 神明 。 这 时 候 ， 代 码 在 审查 阶段 被 发 现 有 bug。 上 司 找到 
你 并 让 你 修复 bug， 因 为 这 段 逻 辑 是 你 实现 的 。 你 审查 了 代码 ， 并 向 上 司 宣称 bug 在 服务 
器 端的 泻 染 中 。 然 后 你 需要 对 使 用 两 套 泻 染 方案 的 原因 进行 一 番 解 释 。 在 解释 完 为 什么 
Java 不 能 在 浏览 器 中 运行 后 ， 你 还 得 向 上 司 保证 这 种 实现 是 值得 的 ， 因 为 这 样 可 以 大 大 提 
升 用 户 体验 。 这 个 问题 像 姿 竹 的 山 苹 那样 被 传 来 传 去 ， 直 到 最 后 才 得 以 解决 。 












































尽管 违背 了 DRY (don't repeat yourself， 不 要 重复 你 自己 ) 原则 ,但 你 依然 被 誉 为 专家 。 
你 的 实现 模式 逐渐 被 大 家 学 习 、 模 仿 ， 进 而 充斥 着 整个 代码 库 。 但 随 着 这 种 模式 的 渗透 ， 
意料 之 外 的 事情 发 生 了 。bug 的 数量 开始 不 断 上 升 ， 开 发 人 员 开 始 害怕 因 修 改 代 码 而 造成 

















时 
了 
x 





的 回归 间 题 。 目 前 欠 下 的 技术 债 甚至 比 国家 的 财政 赤字 还 要 严重 。 工 程 经 理 和 开发 人 员 开 
始 互相 推 务 责任 。 应 用 变 得 非常 脆弱 ， 公 司 也 因此 难以 应 对 市 场 的 快速 变化 。 你 感到 一 种 
强烈 的 罪恶 感 。 幸 好 ， 你 发 现 了 一 种 叫 作 单 页 面 应 用 的 新 模式 …… 


客户 端 架 构 的 救赎 

近 段 时 间 ， 你 阅读 了 一 些 文章 ， 内 容 主要 是 人 们 对 于 前 端 架 构 的 缺失 而 感到 诅 趟 。 这 些 人 
通常 会 将 责任 归咎 于 jQuery， 尽管 这 个 库 本 来 只 是 对 DOM 操作 的 封装 (facade)。 好 在 业 
界 有 人 遇 到 了 和 你 一 样 的 困境 ， 并 且 没 有 在 其 他 不 明 真 相 的 人 的 评论 中 停止 自己 的 脚步 。 
其 中 一 个 人 就 是 Backbone (http://backbonejs.org/) 框架 的 作者 Jeremy Ashkenas (https:// 
github.com/jashkenas ) 。 






















































































你 开始 了 解 Backbone， 阅 读 相 关 文 章 ， 并 且 深 感 兴趣 。Backbone 将 应 用 逻辑 从 数据 检索 
中 抽 离 出 来 ， 并 将 界面 代码 整合 为 单一 语言 和 运行 时 ， 因 此 可 以 有 效 减 少 服务 器 端的 压 
力 。“ 找 到 了 ! ”你 在 心中 欢欣 鼓舞 地 喊 道 。 这 个 框架 将 解决 我 们 遇 到 的 所 有 问题 。 你 又 
提出 了 一 份 新 的 概念 证 明 ， 并 开始 实施 。 


在 我 们 访问 时 发 生 了 什么 

你 很 快 就 被 称 为 救世 主 。 这 种 新 的 SPA 模式 在 公司 范围 内 被 广泛 接受 。bug 的 数量 开始 减 
少 , 工程 师 又 重 拾 了 信心 。 交 付 代码 时 的 悉 惯 感 几乎 已 经 消失 。 这 个 时 候 ， 人 负责 产品 的 同 
事 找到 你 ， 并 告知 你 自从 实现 SPA 模式 之 后 ， 网 站 的 访问 量 下 降 了 。 你 得 想 办 法 处 理 # 号 
片段 带 来 的 问题 了 。 经 过 一 番 详 尽 的 研究 后 ， 你 确定 问题 出 在 搜索 引擎 没有 考虑 URI 中 的 
window. location.hash 部 分 ， 而 Backbone.Router 用 这 部 分 来 创建 可 跳 转 、 可 收藏 书签 、 可 
分 享 的 页 面 视 图 。 因 此 ， 当 搜索 引擎 爬 取 这 个 应 用 时 ， 没 有 任何 可 以 收录 的 内 容 。 现 在 你 
面临 的 形势 更 加 严峻 了 ， 因 为 这 个 问题 会 对 商品 销量 产生 直接 影响 。 因 此 ， 你 再 次 开启 了 
调研 与 开发 的 循环 。 结 果 你 发 现 有 两 种 方案 可 供 选 择 : 第 一 种 方案 是 运转 新 的 服务 器 ， 模 
拟 DOM 操作 以 运行 客户 端 应 用 ， 并 将 搜索 引擎 重 定 向 到 这 些 新 服务 器 上 ;， 第 二 种 方案 是 
十 费 让 其 他 公司 为 你 提供 解决 方案 。 除 了 SPA 实现 给 公司 带 来 的 损失 外 ， 这 两 种 方案 都 需 
要 支付 额外 成 本 。 


同 构 JavaScript: 一 个 美好 的 新 世界 


上 述 这 个 故事 综合 了 我 的 个 人 经 历 以 及 我 从 其 他 工程 师 那里 目睹 或 听 说 的 故事 。 如 有 果 你 也 
曾 为 某 个 Web 应 用 付出 很 多 时 间 ， 我 相信 你 也 会 有 类 似 的 经 历 和 感受 。 故 事 当中 的 某 些 问 
题 已 经 成 为 了 历史 ， 但 部 分 问题 依然 存在 。 此 外 还 有 一 些 问 题 没 有 明说 ， 例 如 页 面 加 载 速 
度 有 待 优化 以 及 缺少 感知 演 染 。 如 果 将 路 由 的 响应 与 演 染 的 生命 周期 合并 为 一 个 通用 的 代 







































































































































































码 库 ， 并 同时 支持 在 客户 端 和 服务 器 端 运 行 ， 应 该 就 可 以 解决 上 述 这 些 问题 以 及 其 他 潜在 
问题 。 这 就 是 同 构 JavaScript 的 意义 所 在 。 同 构 JavaScript 应 用 是 整合 两 种 架构 ， 以 创建 易 
于 维护 的 、 更 好 的 用 户 体验 。 


本 书 的 主要 目的 是 提供 实现 同 构 JavaScript 所 需 的 基础 知识 ， 帮 助 你 理解 业界 现 有 的 同 构 
JavaScript 解决 方案 。 本 书 旨 在 提供 足够 多 的 信息 ， 让 你 在 实际 中 判断 同 构 JavaScript 是 否 
为 可 行 的 解决 方案 ， 同 时 介绍 业内 最 先进 的 解决 方案 ， 避 免 你 重复 造 轮 子 。 


第 一 部 分 是 对 这 个 主题 的 介绍 。 首 先 ， 详 尽 地 介绍 现 有 的 几 种 Web 应 用 架构 ， 内 容 涵 盖 同 
构 JavaScript 的 基本 原理 和 用 例 ， 如 SEO 支持 和 提升 页 面 的 感知 加 载 速度 。 然 后 ， 概 述 不 
同 种 类 的 同 构 JavaScript 应 用 ， 如 实时 应 用 与 类 似 SPA 模式 的 应 用 。 此 外 ， 还 介绍 了 同 构 
应 用 方案 的 组 成 部 分 ， 其 中 包括 提供 环境 shim 和 抽象 的 实现 ， 以 及 真正 与 环境 无 关 的 实 
现 。 该 部 分 将 为 第 二 部 分 莫 定 代码 基础 。 


第 二 部 分 将 主题 分 解 为 关键 概念 ， 这 些 概念 在 大 部 分 同 构 JavaScript 解决 方案 中 被 普遍 使 
用 。 每 种 概念 都 无 须 依 赖 现 有 的 库 [如 React (https://facebook.github.io/react/)、Backbone 
(https://facebook.github.io/react/) 或 Ember (https://facebook.github.io/react/)] 即 可 实现 。 
这 样 做 是 为 了 避免 将 概念 和 某 种 特定 的 解决 方案 混 消 。 


第 三 部 分 将 会 介绍 业内 的 专家 是 如 何在 他 们 的 解决 方案 中 作出 权衡 的 。 


排版 约定 
本 书 使 用 了 下 列 排版 约定 。 


表示 新 术语 或 重点 内 容 。 






















































































。 等 宽 字 体 (constant width) 
表示 程序 片段 ， 以 及 正文 中 出 现 的 变量 、 函 数 名 、 数 据 库 、 数 据 类 型 、 环 境 变 量 、 语 句 
和 关键 字 等 。 








。 加 粗 等 宽 字体 (constant width bold) 
表示 应 该 由 用 户 输入 的 命令 或 其 他 文本 。 














。 等 宽 和 斜体 (constant width italic) 


表示 应 该 由 用 户 输入 的 值 或 根据 上 下 文 确定 的 值 替换 的 文本 。 








该 图 标 表 示 提 示 或 建议 。 


该 图 标 表 示 一 般 注 记 。 


该 图 标 表 示警 告 或 警示 。 








代码 示例 


补充 材料 (代码 示例 、 练 习 等 ) 可 以 从 https://github.com/isomorphic-javascript-book 下 载 。 

















本 书 是 要 帮 你 完成 工作 的 。 一 般 来 说 ， 如 果 本 书 提供 了 示例 代码 ， 你 可 以 把 它 用 在 你 的 程 
序 或 文档 中 。 除 非 你 使 用 了 很 大 一 部 分 代码 ， 否 则 无 须 联系 我 们 获得 许可 。 比 如 ， 用 本 书 
的 几 个 代码 片段 写 一 个 程序 就 无 须 获 得 许可 ， 销 售 或 分 发 O'Reilly 图 书 的 示例 光盘 则 需要 
获得 许可 ;引用 本 书 中 的 示例 代码 回答 问题 无 须 获得 许可 ， 将 书 中 大 量 的 代码 放 到 你 的 产 
品 文档 中 则 需要 获得 许可 。 


我 们 很 希望 但 并 不 强制 要 求 你 在 引用 本 书 内 容 时 加 上 引用 说 明 。 引 用 说 明 一 般 包 括 书 名 、 作 
者 、 出 版 社 和 JSBN。 比 如 : “Building Isomorphic JavaScript Apps by Jason Strimpel and Maxime 
Najim (O’Reilly). Copyright 2016 Jason Strimpel and Maxime Najim, 978-1-491-93293-3”。 




















如 果 你 觉得 自己 对 示例 代码 的 用 法 超出 了 上 述 许可 的 范围 ， 欢 迎 你 通过 permissions@ 
oreilly.com 与 我 们 联系 。 
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.5 Safari Books Online (http:/www.safaribooksonline.com) 是 应 运 而 

S Safa 站 | 生 的 数字 图 书馆 。 它 同时 以 图 书 和 视频 的 形式 出 版 世界 顶级 技术 

和 商务 作家 的 专业 作品 。 技 术 专 家 、 软 件 开发 人 员 、Web 设计 师 、 

商务 人 士 和 创意 专家 等 ， 在 开展 调研 、 解 决 问 题 、 学 习 和 认证 培训 时 ， 都 将 Safari Books 
Online 视 作 获取 资料 的 首选 渠道 。 


对 于 组 织 团 体 、 政 府 机 构 和 个 人 ，Safari Books Online 提供 各 种 产品 组 合 和 灵活 的 定 
价 策略 。 用 户 可 通过 一 个 功能 完备 的 数据 库 检 索 系 统 访问 O'Reilly Media、Prentice 
































Hall Professional、Addison-Wesley Professional、 Microsoft Press、Sams、Que、Peachpit 
Press、 Focal Press、 Cisco Press、 John Wiley & Sons、 Syngress、 Morgan Kaufmann、IBM 
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Jones 履 Bartlett、Course Technology 以 及 其 他 儿 十 家 出 版 社 的 上 千 种 图 书 、 培 训 视 频 和 正 
式 出 版 之 前 的 书稿 。 要 了 解 Safari Books Online 的 更 多 信息 ， 我 们 网 上 见 。 


联系 我 们 
请 把 对 本 书 的 评价 和 问题 发 给 出 版 社 
美国 : 

O’Reilly Media, Inc. 


1005 Gravenstein Highway North 
Sebastopol, CA 95472 
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中 国 : 
北京 市 西城 区 西直门 南大 街 2 号 成 铭 大 厦 C 座 807 室 (100035) 
奥 菜 利 技术 咨询 (北京) 有 限 公司 


O’Reilly 的 每 一 本 书 都 有 专属 网 页 ， 你 可 以 在 那儿 找到 本 书 的 相关 信息 ， 包 括 勘 误 表 、 示 
例 代码 以 及 其 他 信息 。 本 书 的 网 页 地 址 是 : 
http://shop.oreilly.com/product/0636920042846.do 








对 于 本 书 的 评论 和 技术 性 问题 ， 请 发 送 电 子 邮件 到 : 


bookquestions @oreilly.com 





要 了 解 更 多 O'Reilly 图 书 、 培 训 课 程 、 会 议和 新 闻 的 信息 ， 请 访问 以 下 网 站 : 


http://www.oreilly.com 














我 们 在 Facebook 的 地 址 如 下 : 
http://facebook.com/oreilly 


请 关注 我 们 的 Twitter 动态 : 
http://twitter.com/oreillymedia 


我 们 的 YouTube 视频 地 址 如 下 : 
http://www.youtube.com/oreillymedia 
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电子 书 
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第 一 部 分 


简介 与 大 键 概念 





“黄金 时 代 ” 一 词 最 早 源 自 早期 的 希腊 和 罗马 诗人 ， 而 现在 就 成 为 了 技术 革新 时 段 的 代 名 
词 。 在 20 世纪 广播 电视 的 黄金 时 代 ， 作 家 和 艺术 家 将 他 们 的 技能 运用 于 新 的 媒介 中 ， 创 
造 出 了 各 种 新 鲜 和 引 人 注 目的 内 容 。 或 许 我 们 现在 就 处 于 JavaScript 的 黄金 时 代 ， 尽 管 这 
需要 时 间 证 明 。 但 毫 无 疑问 ，JavaScript 已 经 为 在 浏览 絮 中 运行 类 似 于 桌面 程序 的 应 用 这 
一 新 时 代 铺 好 了 道路 。 


在 过 去 的 十 年 中 ，Web 已 经 演进 为 一 个 构建 丰富 、 高 度 交 互 应 用 的 平台 。 浏 览 器 不 再 仅仅 
是 一 个 文档 泻 染 工具 ，Web 也 不 再 仅仅 是 将 各 种 文档 链接 到 一 起 。 网 站 已 经 发 展 为 Web 应 
用 。 这 意味 着 越 来 越 多 的 Web 应 用 逻辑 将 会 在 浏览 器 端 ， 而 非 服务 器 端 运行 。 然 而 ， 在 
过 去 的 十 年 中 ， 用 户 的 期 望 也 在 不 断 提高 ， 首 屏 加 载 速度 显得 越发 重要 。Radware 的 一 份 
报 告 (http://www.slideshare.net/Radware/2015-spring-state-of-the-union-ecommerce-page-speed- 
web-performance-infographic) 显示 ，1999 年 , 一 般 用 户 愿意 等 待 的 页 面 加 载 时 间 为 8 秒 。 到 
2010 年 ，57% 的 在 线 购物 者 称 ， 如 果 一 个 页 面 在 3 秒 之 内 没有 显示 任何 内 容 ， 那 么 他 们 就 
会 将 它 关 闭 。 调 查 结果 正好 反映 出 了 JavaScript 黄金 时 代 的 问题 所 在 : 客户 端 JavaScript 在 
丰富 页 面 内 容 和 增强 交互 性 的 同时 ， 也 延长 了 页 面 加 载 时 间 ， 这 使 得 用 户 在 初次 加 载 时 的 
体验 非常 糟糕 。 页 面 加 载 时 间 最 终 会 影响 公司 的 效益 。amazon.com 和 walmartcom 的 报告 
都 显示 : 页 面 加 载 时 间 每 缩短 100 毫秒 ， 他 们 的 收入 就 会 获得 高 达 1% 的 增长 (http://www. 


globaldots.com/how-website-speed-affects-conversion-rates/) 。 



















































































我 们 将 在 本 书 的 第 一 部 分 中 介绍 同 构 JavaScript 的 概念 ， 以 及 同 构 泻 染 如 何 大 幅 提 升 用 户 
体验 。 我 们 还 将 以 图 谱 的 形式 探讨 同 构 JavaScript， 简 述 几 种 不 同类 型 的 同 构 代码 。 最 后 ， 
我 们 将 目光 放 远 ， 看 看 同 构 JavaScript 如 何 基 于 服务 器 端 演 染 技术 ， 创 建 出 复杂 、 实 时 更 
新 、 支 持 协 作 的 实时 应 用 。 





第 1 章 


为 什么 需要 同 构 JavaScript 





Jason Strimpel、 Maxime Najim 


2010 年 ，Twitter 对 其 网 站 进行 了 一 次 重 构 ， 并 发 布 了 新 的 版 本 。 这 个 称 为 “#NewTwitter” 
的 新 版 本 将 UI 泻 染 和 业务 逻辑 放 在 了 JavaScript 中 ， 并 在 用 户 的 浏览 器 中 运行 。 这 种 架 
构 在 当时 是 开创 性 的 。 然 而 ， 不 到 两 年 的 时 间 ，Twitter 再 次 进行 了 重 构 ， 将 演 染 功能 移 回 
了 服务 器 端 。Twitter 的 这 次 改版 将 页 面 的 初始 泻 染 时 间 缩 短 到 了 原来 的 五 分 之 一 (https:// 
blog.twitter.com/2012/improving-performance-on-twittercom) 。Twitter 的 做 法 在 JavaScript 社区 
中 引起 了 友 动 。 开 发 者 和 其 他 许多 人 很 快意 识 到 ， 客 户 端 演 染 对 性 能 有 着 非常 明显 的 影响 。 























构建 客户 端 Web 应 用 的 最 大 劣势 在 于 ， 首 次 加 载 需 要 付出 高 郧 的 代价 下 
载 一 个 JavaScript 大 文件 。 互 联网 中 的 主要 传输 协议 是 TCP (Transmission 
Control Protocol， 传 输 控 制 协议 ) ， 该 协议 定义 了 一 种 被 称 为 慢 启动 (slow 
start) 的 拥塞 控制 机 制 ， 这 意味 着 数据 是 以 逐渐 增加 数据 块 的 方式 进行 发 送 
的 。Ilya Grigorik 在 《Web 性 能 权威 指南 》 一 书 中 解释 了 TCP 协议 如 何 经 
过 “客户 端 与 服务 器 端 之 间 的 4 次 往返 …… 以 及 几 百 毫秒 的 延迟 ， 才 能 达到 
64KB 的 吞吐 量 "。 显 然 ， 发 送 给 用 户 的 前 几 千 字 节 的 数据 对 良好 的 用 户 体验 
和 页 面 响应 性 至 关 重要 。 

















客户 端 JavaScript 应 用 在 初始 化 时 只 包含 一 个 <script> 标签 和 一 个 空 的 <body> 标签 ， 这 类 
应 用 的 赐 起 产生 了 一 些 问题 : 初始 化 加 载 速度 慢 、 需 要 对 URL 进行 hashbang (#!) 的 特 





























注 1: 此 书 已 由 人 民 邮 电 出 版 社 出 版 ，http://www.ituring.com.cn/book/1194。 一 一 编者 注 


殊 处 理 〈 随 后 将 对 此 进行 详细 介绍 ) ， 以 及 精 糕 的 搜索 引擎 检索 性 。 通 过 将 客户 端 和 服务 
器 端 代码 合 二 为 一 ， 同 构 JavaScript 解决 了 这 些 问题 。 同 构 JavaScript 提供 了 整合 两 种 架构 
的 能 力 ， 可 以 创建 易于 维护 的 、 用 户 体验 良好 的 应 用 。 


1.1 定义 同 构 JavaScript 
简单 来 说 ， 同 构 JavaScript 应 用 就 是 在 浏览 器 客户 端 和 Web 应 用 服务 器 端 间 共 享 同 一 套 
JavaScript 代码 的 应 用 。 从 某 种 意义 上 讲 ， 之 所 以 称 为 同 构 ， 是 因为 无 论 在 客户 端 还 是 在 
服务 器 端 运 行 ， 应 用 都 具有 相同 的 形式 或 形态 。 同 构 JavaScript 是 JavaScript 发 展 进程 中 的 
革命 性 一 步 。 但 就 像 钟 摆 一 样 ， 软 件 开 发 中 的 进步 通常 不 稳定 ， 来 来 回回 。 如 果 从 事 软件 
开发 已 有 一 段 时 间 ， 那 么 你 可 能 已 经 了 解 过 一 些 时 隐 时 现 的 设计 方法 。 在 某 些 情况 下 ， 我 
们 似乎 永远 无 法 找到 正确 的 平衡 点 。 














近 20 年 来 ，Web 应 用 的 发 展 方式 非常 符合 这 一 规律 。 我 们 见证 了 Web 的 演进 一 一 从 最 初 
简陋 的 蓝 色 超 链接 静态 页 到 如 今 用 户 体验 丰富 、 可 以 媲美 成 熟 原生 应 用 的 平台 。 之 所 以 能 
做 到 这 一 点 ， 是 因为 Web 的 客户 端 - 服务 器 模型 迅速 从 重 服务 器 端 、 轻 客户 端的 方式 转 
变 为 轻 服务 器 端 、 重 客户 端的 方式 。 然 而 ， 这 种 方式 的 转变 导致 了 大 量 问题 ， 我 们 将 在 本 
章 后 面具 体 讨论 。 就 目前 而 言 ， 可 以 简单 地 概括 为 我 们 需要 在 重 客户 端 和 重 服务 器 端 之 间 
取得 平衡 。 为 了 真正 了 解 这 种 平衡 的 意义 ， 我 们 必须 先后 退 一 步 ， 看 看 Web 应 用 在 过 去 几 
十 年 里 是 如 何 发 展 的 。 


1.2 评价 其 他 的 Web 应 用 架构 方案 


要 想 理 解 同 构 JavaScript 方案 的 由 来 ， 必 须 先 了 解 这 个 方案 出 现时 的 状况 。 首 先 要 确认 主 
要 的 使 用 场景 。 

















第 2 章 中 介绍 了 两 种 类 型 的 同 构 JavaScript 应 用 并 分 析 了 其 架构 。 本 书 探讨 
的 同 构 JavaScript 应 用 场景 是 电子 商务 相关 的 Web 应 用 。 








1.2.1 状况 的 改变 

万 维 网 (World Wide Web) 的 出 现 要 归功 于 Tim Berners Lee (https://www.w3.org/People/ 
Berers-Lee/) 。 当 时 他 在 一 个 核 研 究 机 构 中 工作 ， 并 在 一 个 名 为 Enquire (https://en.wikipedia. 
org/wikiENQUIRE) 的 项 目 中 尝试 使 用 了 超 链接 技术 。1989 年 ，Tim 整理 了 超 链接 的 概念 ， 
提议 在 一 个 提供 文档 链接 的 中 央 数 据 库 中 应 用 这 项 技术 。 随 着 时 间 推 移 ， 数 据 库 变 得 越发 庞 
大 ， 对 我 们 的 日 常生 活 (如 通过 社交 媒体 ) 和 商业 (电子 商务 ) 产生 了 巨大 影响 。 我 们 这 些 
青少年 都 深 陷 到 这 个 虚拟 的 大 商场 中 。 丰 富 多 样 的 内 容 和 购物 选项 能 够 帮助 我 们 在 购买 时 
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作出 明智 的 决定 。 在 意识 到 消费 者 的 选择 多 如 牛 毛 后 ， 企 业 非 常 关心 我 们 能 否 找 到 并 查看 
他 们 的 内 容 与 商品 ， 因 为 他 们 的 最 终 目 标 是 提高 转换 率 (让 我 们 购物 )。 为 此 ， 其 至 还 出 
现 了 专门 负责 搜索 引擎 优化 (search engine optimization，SEO) 的 专家 ， 这 些 专家 唯一 的 
工作 就 是 让 企业 的 内 容 和 商品 出 现在 搜索 结果 前 列 。 然 而 ， 有 关 转 换 率 的 斗争 并 没有 到 此 
结束 。 一 旦 消费 者 找到 商品 ， 页 面 必须 能 够 快速 加 载 并 响应 用 户 的 交互 操作 ， 否 则 企业 可 
能 会 将 消费 者 拱手 让 给 竞争 对 手 。 这 正 是 我 们 身 为 工程 师 应 当 发 挥 作用 的 地 方 ， 而 除了 企 
业 的 关注 点 外 ， 我 们 还 有 自己 的 一 系列 关注 点 。 


















































1.2.2 工程 上 的 关注 点 

作为 工程 师 ， 我 们 也 有 自己 的 一 些 担忧 ， 主 要 关于 可 维护 性 和 效率 ， 但 这 并 不 是 说 我 们 在 
权衡 技术 决策 时 不 会 考虑 企业 的 关注 点 。 事 实 上， 优秀 工程 师 的 做 法 恰恰 相反 : 他 们 会 基 
于 手头 的 业务 问题 权衡 短期 和 长 期 的 利 静 ， 为 每 个 可 能 发 生 的 业务 问题 寻找 最 优 解 。 








1.2.3 ”可 选 架构 

考虑 到 我 们 的 主要 业务 场景 是 电 商 应 用 ， 我 们 来 看 看 在 Web 发 展 史 中 适用 于 该 场景 的 几 种 
架构 。 但 在 此 之 前 ， 我 们 先 要 明确 一 些 关键 的 评判 标准 ， 以 便 公 正 地 评估 不 同 的 架构 。 以 
下 标准 是 按照 重要 性 排序 的 。 


(1) 应 用 要 能 够 收录 在 搜索 引擎 中 。 

(2) 应 用 的 首 屏 加 载 速度 应 该 是 优化 过 的 ， 也 就 是 说 ， 关 键 泻 染 路 径 (critical rendering 
path) 应 该 属于 初始 响应 的 一 部 分 。 

(3) 应 用 要 能 够 响应 用 户 的 交互 操作 (比如 优化 后 的 网 页 切换 )。 





关键 泻 染 路 径 指 的 是 页 面 上 与 用 户 的 主要 操作 相关 的 内 容 。 在 电子 商务 应 用 
中 ， 关 键 泻 染 路 径 是 对 商品 的 描述 。 对 新 闻 网 站 来 说 ， 关 键 泻 染 路 径 则 是 一 
篇 文章 的 内 容 。 








在 整个 评估 过 程 中 ， 必 须 权衡 这 些 业 务 标准 和 工程 的 主要 关注 点 (可 维护 性 和 效率 )。 


1. 传统 的 Web 应 用 

前 面 提 到 过 ， 设 计 和 创造 Web 的 最 初 目的 是 共享 信息 。 由 于 万 维 网 的 提出 是 以 Enquire 项 
目的 成 功 作为 前 提 的 ， 因 此 Web 在 起 步 阶段 仅仅 用 于 多 页 文档 的 相互 连接 不 足 为 奇 。20 
世纪 90 年 代 初 ， 大 部 分 的 Web 内 容 都 是 以 完整 的 HTML 页 面 的 形式 浑 染 的。 当时 文 持 
这 种 方式 的 机 制 是 HTML、URI 和 HTTP (现在 也 依然 如 此 )。HTML (Hypertext Markup 
Language， 超 文本 标记 语言 ) 是 一 种 标记 规范 ， 当 浏览 器 解析 标记 时 ， 会 将 其 转换 为 文档 
对 象 模型 。URI (Uniform Resource Identifier， 统 一 资源 标识 符 ) 用 于 标识 资源 的 名 称 ， 即 
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应 该 响应 请 求 的 服务 器 的 名 称 。HTTP (Hypertext Transfer Protocol， 超 文本 传输 协议 ) 是 
负责 连接 一 切 的 传输 协议 。 这 三 种 机 制 为 互联 网 提供 了 动力 ， 并 形成 了 传统 Web 应 用 的 架 
构 。 

传统 的 Web 应 用 指 的 是 : 所 有 的 标记 一 一 至 少 是 关键 演 染 路 径 的 标记 一 一 是 通过 服务 器 使 
用 某 种 服务 器 端 语言 (如 PHP、Ruby、Java 等 ) 进行 泻 染 的 ， 如 图 1-1 所 示 。 浏 览 器 解析 
文档 后 ， 用 于 丰富 用 户 体 验 的 JavaScript 代码 会 被 初始 化 。 





























服务 器 端 


表现 层 (组 件 ) 





1) 请 求 页 面 


应 用 逻辑 
(工作 流 ) 














2) HIML、CSS 
和 JavaScript 


数据 访问 层 


(DAO、Service Agents) 








1-1: 传统 Web 应 用 的 流程 


简 而 言 之 ， 上 图 展示 了 传统 Web 应 用 的 架构 。 我 们 来 研究 一 下 这 个 架构 是 否 符合 我 们 的 评 
估 标 准 和 工程 上 的 关注 点 。 


首先 ， 它 很 容易 被 搜索 引擎 收 未 ， 因 为 当 爬 虫 思 历 应 用 时 ， 所 有 的 内 容 都 是 可 爬 取 的 ， 所 
以 消费 者 是 可 以 搜索 到 应 用 内 容 的 。 甚 次， 页 面 加 载 也 经 过 了 优化 ， 因 为 关键 泻 染 路 径 的 
标记 是 通过 服务 器 端 进行 泻 染 的 ， 从 而 提高 了 感知 的 泻 染 速度 ， 降 低 了 用 户 跳 出 应 用 的 可 
能 性 。 然 而 ， 传 统 的 Web 应 用 只 能 满足 上 述 三 点 要 求 中 的 两 点 。 























我 们 所 说 的 “感知 的 泻 染 速度 ”是 什么 意思 呢 ? Tlya Grigorik 在 《Web 性 能 
权威 指南 》 一 书 中 是 这 样 解释 的 :“ 时 间 测 量 是 客观 的 ， 而 时 间 感 知 是 主观 
的 。 我 们 可 以 通过 设计 来 改善 感知 性 能 。” 





























在 传统 的 Web 应 用 中 ， 页 面 导 航 和 数据 传输 都 遵循 Web 原本 设计 的 方式 进行 。 当 用 户 导 
航 到 一 个 新 页 面 或 者 提交 表单 数据 时 ， 浏 览 器 会 发 送 请 求 、 取 得 响应 并 解析 完整 的 文档 
流 ， 即 使 页 面 中 只 有 部 分 信息 改变 了 。 这 种 方式 在 实现 前 两 个 评判 标准 时 极为 有 效 ， 但 这 
种 全 页 面 安 装 和 拆 印 的 生命 周期 的 代价 非常 高 ， 因 此 在 啊 应 性 方面 这 只 是 一 个 次 优 解 。 因 
为 有 幸 生 活 在 拥有 Ajax 的 年 代 ， 所 以 我 们 都 已 经 知道 还 有 比 整 页 刷新 更 加 高 效 的 方法 。 
但 引入 Ajax 也 会 带 来 成 本 ,我 们 将 会 在 下 一 市 中 具体 探讨 。 但 在 进入 下 一 市 之 前 ， 我 们 
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应 该 先 看 看 在 传统 Web 应 用 的 背景 下 是 如 何 应 用 Ajax 的 。 


Ajax 时 代 。 星 星之 火 可 以 烘 原 ， 而 XMLHttpRequest (https://developer.mozilla.org/en-US/ 
docs/Web/API/XMLHttpRequest) 正 是 点 亮 Web 平台 的 星火 。 然 而 ， 这 项 技术 在 集成 到 传 
统 Web 应 用 中 时 并 没有 给 人 留 下 太 深 刻 的 印象 ， 这 并 不 是 因为 设计 或 者 技术 本 身 的 原因 ， 
而 是 因为 负责 集成 该 技术 到 传统 Web 应 用 中 的 那些 人 缺乏 使 用 经 验 。 在 大 多 数 情 况 下 ， 负 
责 该 工作 的 人 都 是 刚 开 始 专攻 视图 层 的 设计 师 。 我 自己 是 从 行政 助理 转 为 设计 师 和 开发 者 
的 。 当 时 ， 我 的 这 两 项 技能 都 不 足 。 不 用 说 ， 我 对 过 去 参与 过 的 应 用 造成 了 很 大 的 破坏 
(不 过 我 认为 这 是 我 对 平台 演进 的 贡献 ) 。 不 幸 的 是 ， 在 这 段 演进 期 ， 我 和 那些 缺乏 适当 培 
训 与 指导 的 人 们 接触 的 所 有 应 用 都 受 尽 了 苦头 一 一 它们 的 过 程 重复 、 关 注 点 混乱 。 有 一 个 
很 好 的 例子 可 以 突出 这 些 问题 ， 即 相关 商品 的 轮 播 组 件 (如 图 1-2 所 示 )。 
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图 1-2: 商品 轮 播 组 件 示例 


(相关 ) 商品 轮 播 组 件 可 以 分 页 浏览 产品 。 在 某 些 情况 下 ， 所 有 产品 都 是 预先 加 载 的 ， 但 
有 时 会 因为 商品 数量 太 多 而 不 能 采用 预 加 载 。 在 第 二 种 情况 下 ， 需 要 发 起 网 络 请 求 以 获取 
下 一 页 的 商品 信息 。 由 于 刷新 整个 页 面 的 效率 极 低 ， 因 此 典型 的 解决 方案 是 在 翻 页 时 使 用 
Ajax 获取 新 的 商品 页 面 集 。 接 下 来 可 优化 的 是 ， 只 获取 浑 染 页 面 集 所 需要 的 数据 ， 这 意味 
着 你 需要 创建 用 于 重复 生成 的 模板 、 模 型 和 静态 资源 ， 并 在 客户 端 进行 泻 染 (如 图 1-3 所 
示 )。 这 种 做 法 需要 编写 更 多 单元 测试 。 这 个 例子 非常 简单 ， 但 如 果 将 这 种 思想 推广 到 大 
型 应 用 中 ， 你 将 发 现 应 用 会 变 得 难以 跟踪 与 维护 一 一 你 不 能 轻易 地 推断 出 应 用 是 如 何 结束 
在 茶 个 特定 状态 的 。 此 外 ， 重 复 编写 泻 染 逻辑 是 一 种 资源 浪费 ， 而 且 在 添加 或 者 修改 功能 
时 ， 同 时 操作 两 份 UI 代码 会 导致 应 用 出 现 bug 的 概率 增高 。 


由 于 启用 了 Ajax， 再 加 上 看 似 美 好 的 初 囊 ， 导 致 了 UL 视图 层 的 分 裂 与 复制 ， 一 个 看 似 精 
心 构 造 的 应 用 就 此 化 作 瓦砾 ， 从 而 让 无 数 工程 师 遭 受 了 挫折 。 好 在 工程 师 在 诅 形 的 时 候 通 
常 是 最 有 创造 力 的 。 正 是 这 种 挫折 推动 了 创新 ， 再 结合 工程 师 扎实 的 工程 技能 ， 便 造就 了 
下 一 代 应 用 架构 。 
































































































































1) 请 求 页 务 服务 器 端 




















2) HIML. CSS 民 (组 件 ) 
和 JavaScript 








3) Ajax 请 求 














1-3: 使 用 Ajax 的 传统 Web 应 用 流程 


2. 单 页 面 Web 应 用 

一 切 事 物 都 有 自己 的 循环 周期 。 在 Web 开始 阶段 时 流行 的 轻 客 户 端 可 能 给 了 Sun 
Microsystems 的 NetWork Terminal (NeWT，https:Wen.wikipedia.org/wiki/Sun_Ray) 以 启 
发 。 但 到 了 2011 年 ，Web 应 用 开始 放弃 轻 客户 端 模型 ， 并 过 渡 到 重 客户 端 模 型 ， 而 操 
作 系 统领 域 在 多 年 以 前 就 发 生 过 这 样 的 变化 。 巨 石 已 经 序 出 水 面 。 这 就 是 单 页 面 应 用 架 
构 的 黎明 。 

通过 将 泻 染 工 作 完全 转移 到 客户 端 来 进行 ，SPA 解决 了 一 直 以 来 困扰 着 传统 Web 应 用 的 
问题 。 该 模型 将 应 用 逻辑 从 数据 检索 中 抽 离 出 来 ， 并 将 UI 代码 整合 为 单一 语言 和 运行 时 ， 
因此 可 以 有 效 地 减少 服务 器 端的 压力 (如 图 1-4 所 示 )。 



























































1) 请 求 页 而 

















2) JavaScript 
(模板 ) 





3) Ajax 请 求 





4) JSON 











1-4: 单 页 面 应 用 的 流程 

之 所 以 能 减少 服务 器 端的 压力 ， 是 因为 服务 器 先 将 一 份 包含 了 静态 资源 、JavaScript 和 模 
板 的 静 荷 数据 (payload) 发 送 到 了 客户 端 。 之 后 ， 客 户 端 只 需要 获取 泻 染 页 面 或 视图 所 需 
要 的 数据 即 可 。 这 种 行为 显著 提高 了 页 面 的 泻 染 效果 ， 因 为 避免 了 在 用 户 请 求 新 页 面 或 提 
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交 数 据 时 重新 请 求 并 解析 页 面 的 性 能 开销 。 除 了 性 能 收益 外 ， 这 种 模型 还 解决 了 将 Ajax 
引入 传统 Web 应 用 中 所 产生 的 工程 问题 。 





现在 回 到 之 前 讨论 的 产品 轮 播 组 件 示例 ， 第 一 页 (相关) 产品 的 信息 在 以 前 是 由 应 用 服务 
器 泻 染 的 。 在 翻 页 时 ， 客 户 端 负 责 发 起 随后 的 请 求 并 进行 演 染 。 在 现代 Web 平台 中 ， 这 种 
职责 的 模糊 界限 和 工作 的 重 登 正 是 传统 Web 应 用 面临 的 主要 问题 。 但 这 些 问题 在 SPA 中 
将 不 复 存 在 。 


在 SPA 中 ， 服 务 器 端 和 客户 端 之 间 存在 明确 的 界限 。API 服务 器 响应 数据 请 求 ， 应 用 服务 
器 提供 静态 资源 ， 而 客户 端 则 负责 展示 。 在 这 个 产品 轮 播 的 例子 中 ， 应 用 服务 器 会 向 浏览 
器 发 送 一 份 仅 包含 JavaScript 静 荷 数据 和 模板 资源 的 空 文档 。 客 户 端 应 用 在 浏览 器 中 进行 
初始 化 并 向 服务 器 请 求 泻 染 视图 所 需要 的 数据 ， 视 图 中 包含 了 轮 播 组 件 。 收 到 数据 后 ， 客 
户 端 应 用 将 会 为 这 次 轮 播 演 染 产品 的 第 一 组 集合 。 在 翻 页 时 ， 请 求 数据 和 泻 染 的 生命 周期 
会 再 次 重复 ， 并 且 复 用 同一 段 代码 路 径 。 这 确实 是 一 种 优秀 的 工程 解决 方案 ,但 问题 是 ， 
这 种 方案 并 不 能 在 任何 时 候 都 提供 最 佳 的 用 户 体验 。 

















在 SPA 中 ,终端 用 户 感知 到 的 初始 页 面 加 载 速 度 可 能 会 非常 缓慢 ， 因 为 用 户 必须 等 到 数据 
请 求 完 成 才能 看 见 页 面 泻 染 。 因 此 ， 在 页 面 加 载 时 ， 用 户 最 多 只 能 看 到 加 载 指示 器 动画 ， 
而 不 能 立即 看 到 内 容 。 针 对 泻 染 延迟 的 问题 ， 一 种 常见 的 折 中 方案 是 ， 为 初始 页 面 的 数据 
提供 专门 的 数据 优化 服务 。 但 这 样 做 就 需要 编写 额外 的 服务 器 端 应 用 逻辑 ， 从 而 导致 两 端 
职责 范围 再 次 变 得 模糊 ， 还 需要 额外 维护 另外 一 层 代码 。 









































SPA 面临 的 第 二 个 问题 关系 到 用 户 体 验 和 企业 利益 。 在 默认 情况 下 ，SPA 对 SEO 不 友好 ， 
这 意味 着 用 户 不 能 通过 搜索 引擎 找到 与 应 用 相关 的 内 容 。 这 个 问题 源 于 SPA 利用 了 hash 
片段 实现 路 由 。 在 分 析 这 种 方式 为 什么 会 影响 SEO 之 前 ， 我 们 先 看 看 SPA 路 由 的 机 制 。 














SPA 依赖 hash 片段 将 人 造 的 URI 路 径 映 射 到 路 由 处 理 器 中 ， 该 处 理 嚣 会演 染 对 应 的 视 
举 个 例子 ， 在 传统 的 Web 应 用 中 ,“ 关 于 我 们 ”的 页 面 URI 可 能 是 http://domain.com/about， 
但 在 SPA 中 则 可 能 是 http:/domain.com/#about。SPA 在 URL 的 末尾 添加 了 一 个 # 号 和 一 个 
片段 标识 符 。SPA 路 由 之 所 以 要 利用 hash 片段 ， 是 因为 片段 的 内 容 发 生变 化 时 ， 浏 览 器 不 
会 像 URI 发 生变 化 时 那样 发 起 新 的 网 络 请 求 。 这 一 点 至 关 重 要 ， 因 为 SPA 的 整个 大 前 提 就 
是 只 请 求 页 面 或 视图 演 染 所 需要 的 数据 ， 而 不 是 为 每 一 个 页 面 获取 并 解析 整 份 文档 。 


SPA 片段 对 SEO 不 友好 的 原因 是 ，hash 片段 不 会 作为 HTTP 请 求 中 的 一 部 分 发 送 给 服 
务 器 (按照 规范 定义 )。 对 于 Web 扑 虫 而 言 ，http://domain.com/#about 和 http://domain. 
comy/#faqs 是 同一 个 页 面 。 好 在 谷歌 定义 了 一 种 变通 方案 ， 为 hash 片段 提供 了 SEO 支持 ， 
这 个 方案 就 是 使 用 “#1!” (hashbang) S 
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大 多 数 的 SPA 库 目 前 已 经 支持 History API (https://developer.mozilla.org/en- 
US/docs/Web/API/History)， 并 且 谷 歌 的 候 虫 最 近 对 于 索引 JavaScript 应 用 提 
供 了 更 好 的 支持 一 一 在 此 之 前 ，JavaScript 代码 甚至 不 会 被 Web 仆 虫 所 执行 。 



































按照 谷歌 的 规定 ， 其 基本 前 提 是 将 SPA 路 由 片段 中 的 “# ”替换 为 “#”， 因 此 http:// 
domain.com/#about 需要 更 改 为 http://domain.com/#!labout。 这 样 一 来 ， 谷 歌 的 仆 虫 才能 确定 
这 个 页 面 的 内 容 需 要 被 索引 ， 而 不 仅仅 是 简单 地 销 点 。 





锚 点 标签 用 于 在 文档 内 部 创建 内 容 链 接 。 








随后 ， 扑 虫 将 这 个 链接 转换 为 完全 合格 的 URI 版 本 ， 因 此 http://domain.com/#labout 会 变 
成 http://domain.com/?query&_escaped_fragment=about。 然 后 ， 服 务 器 端 负 责 将 SPA 对 应 的 
屏幕 快照 提供 给 爬虫 。 图 1-5 展示 了 该 过 程 。 




















疏 取 domain.com 


提取 链接 
(dHhttp://domain.com/#!about) 


转换 链接 
(SdHhttp://domain.com/?query 
&_escaped_fragment=about) 











疏 取 http://domain.Com/?query 
&_escaped_fragment=about 
将 请 求 映射 到 : 

http://domain.com/#!about 


渲染 HTML 快 照 


HTMIL 快 照 











图 1-5: 扑 虫 收录 SPA URI 的 过 程 
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此 时 ，SPA 的 价值 主张 愈 发 下 降 了 。 从 工程 角度 来 说 ， 需 要 在 下 列 方案 中 二 选 一 。 








() 在 服务 器 中 运行 一 个 无 界面 的 浏览 器 ， 如 PhantomJS (http://phantomjs.org/)， 用 于 在 服 
务 器 中 运行 SPA 并 响应 爬虫 请 求 。 
(2) 将 这 个 问题 外 包 给 第 三 方 供 应 商 解决 ， 如 BromBone (http://www.brombone.com/)。 


























这 两 种 修复 方案 都 需要 成 本 ， 而 且 还 不 包括 前 面 提 及 的 首 屏 泻 染 不 理想 的 成 本 。 好 在 工程 
师 都 善于 解决 问题 。 正 如 从 传统 Web 应 用 到 SPA 的 改进 ， 新 一 代 架 构 诞 生 了 ， 也 就 是 同 
构 JavaScript。 














3. 同 构 JavaScript 应 用 
同 构 JavaScript 应 用 是 传统 Web 应 用 和 SPA 架构 的 完美 结合 。 同 构 应 用 有 具备 以 下 优势 。 





。 SEO 默认 支持 使 用 完全 合法 的 URL 不 再 需要 “#1!” 的 变通 方案 了 一 一 通过 History 
API 进行 跳 转 ， 在 不 支持 History API 的 浏览 器 中 可 以 优雅 地 回 退 到 服务 器 端 泻 染 模 式 。 

。 在 支持 History API 的 浏览 器 中 ， 后 续 的 页 面 请 求 使 用 了 SPA 模型 的 分 布 式 泻 染 。 这 种 
实现 还 可 以 减轻 服务 器 的 负载 。 

。 对 于 同一 个 这 染 周期 ， 客 户 端 和 服务 器 端 可 以 重用 同一 套 代 码 。 这 意味 着 我 们 不 需要 重 
复 劳 动 ， 也 不 会 让 界限 变 得 模糊 。 这 可 以 在 降低 UI 开发 成 本 与 bug 数量 的 同时 ， 提 高 

团队 的 开发 速度 。 

。 通过 在 服务 器 端 演 染 首 屏 页 面 提高 加 载 速度 。 用 户 不 再 需要 在 首 屏 演 染 之 前 等 待 网 络 请 
求 完 成 和 一 直 看 着 加 载 指示 器 动画 了 。 

。 纯 JavaScript 技术 栈 ， 这 意味 着 应 用 界面 的 代码 (https://www.nczonline.net/blog/2013/ 
10/07/node-js-and-the-new-web-front-end/) 可 以 由 前 端 工程 师 单独 维护 ， 而 无 须 经 过 后 
端 工程 师 。 关 注 点 和 责任 更 清晰 地 分 离 ， 这 使 得 每 个 人 都 可 以 只 在 自己 擅长 的 领域 贡献 
代码 ， 从 而 做 到 术 业 有 专攻 。 


同 构 JavaScript 架构 可 以 同时 满足 本 节 前 面 提 到 的 三 个 评判 标准 。 同 构 JavaScript 应 用 可 
以 轻松 地 被 所 有 的 搜索 引 警 收录 ， 并 能 优化 网 页 加 载 速度 和 页 面 之 间 的 过 渡 (适用 于 支持 
History API 的 浏览 器 ， 而 在 老 版 本 训 览 器 中 可 以 优雅 地 降级 ， 不 会 对 应 用 架构 产生 影响 ) 。 


1.3 ”附加 说 明 : 何 时 不 使 用 同 构 

像 Yahoo!、Facebook、Netflix 和 Airbnb 这 些 公司 已 经 接受 了 同 构 JavaScript。 然 而 ， 同 构 
JavaScript 架构 可 能 仅仅 适用 于 某 些 类 型 的 应 用 。 正 如 我 们 将 在 本 书 中 探索 的 那样 ， 同 构 
JavaScript 应 用 需要 更 多 架构 上 的 考虑 ， 实 现 上 也 存在 一 定 的 复杂 度 。 对 于 SPA 来 说 ， 如 
果 性 能 要 求 不 高 或 者 没有 SEO 需求 〈 比 如 需要 登录 后 才能 使 用 ) ， 同 构 JavaScript 带 来 的 
麻烦 似乎 远大 于 收益 。 










































































此 外 ， 很 多 公司 和 组 织 可 能 还 没准 备 在 服务 器 上 操作 和 维护 一 个 JavaScript 的 执行 引擎 。 
例如 ， 大 量 使 用 Java、Ruby、Python、PHP 的 组 织 可 能 并 不 知道 如 何在 生产 环境 中 对 一 个 
JavaScript 应 用 服务 器 (如 Node.js) 进行 监控 与 故障 诊断 。 在 这 些 情况 下 ， 同 构 JavaScript 
可 能 会 引起 难以 承受 的 额外 操作 成 本 。 














Node.js 提供 了 一 个 出 色 的 服务 器 端 JavaScript 运行 时 。 对 于 使 用 了 Java、 
Ruby、Python 或 者 PHP 的 服务 器 来 说 ， 有 两 种 主要 的 候选 方案 : 一 是 
在 正常 的 服务 器 之 外 再 运行 一 个 Node.js 进程 ， 将 后 者 作为 本 地 或 者 远程 
的 “ 演 染 服务 ”;， 二 是 使 用 各 入 式 JavaScript 引擎 〈 比 如 集成 在 Java 8 中 的 
Nashorn)。 然 而 ， 这 两 种 方案 都 有 明显 的 缺点 。 运 行 Node.js 作为 泻 染 服务 
需要 在 进行 socket 通信 时 序列 化 数据 ， 这 带 来 了 额外 的 开销 。 同 样 ， 在 其 他 
语言 中 使 用 的 典 入 式 JavaScript 引擎 通常 是 没有 经 过 优化 的 ， 可 能 会 导致 额 
外 的 性 能 问题 (尽管 这 会 随 着 时 间 的 推移 得 到 改善 )。 








如 果 你 的 项 目 或 者 公司 不 需要 借助 同 构 JavaScript 架构 提供 的 便利 (如 本 章 所 述 )， 请 务必 
针对 具体 工作 选择 合适 的 技术 。 然 而 ， 当 服务 器 端 泻 染 不 在 你 的 选择 范围 之 内 ， 而 你 又 需 
要 关注 首 屏 加 载 速度 和 搜索 引擎 优化 时 ， 别 担心 ， 本 书 可 以 帮 到 你 。 














1.4 ”小 结 


我 们 在 本 章 中 定义 了 同 构 JavaScript 应 用 一 一 在 浏览 器 客户 端 以 及 Web 应 用 服务 器 端 共 享 
同一 套 JavaScript 代码 的 应 用 一 一 并 确定 了 本 书 中 主要 讨论 的 同 构 JavaScript 应 用 类 型 是 电 
商 应 用 。 随 后 ， 我 们 回顾 了 Web 的 发 展 历史 并 研究 了 其 他 架构 的 发 展 历程 ， 通 过 SEO 支 
持 、 首 屏 加 载 速度 优化 和 页 面 过 渡 效 果 优化 这 三 个 关键 的 验收 标准 评估 了 这 些 架构 。 我 们 
看 到 ， 同 构 JavaScript 出 现 之 前 的 架构 不 能 满足 所 有 的 验收 标准 。 在 本 章 最 后 ， 我 们 将 传 
统 Web 应 用 和 SPA 的 优势 结合 起 来 ， 得 到 了 同 构 JavaScript 应 用 架构 。 
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根据 客户 端 和 服务 器 端 代码 共享 程度 的 不 同 ， 可 以 将 同 构 JavaScript 划分 出 一 个 图 谱 (如 
图 2-1 所 示 )。 在 图 谱 的 左 侧 ， 客 户 端 和 服务 器 端 共 用 最 低 限 度 的 视图 泻 染 (如 Handlebars. 
js 的 模板 )， 以 及 某 些 名 字 、 日 期 或 URL 的 格式 化 代码 ， 或 者 是 应 用 逻辑 的 某 些 部 分 。 在 
图 谱 的 这 一 侧 ， 我 们 通常 会 发 现 客户 端 和 服务 器 端 通过 共用 模板 的 方式 共享 视图 层 ， 并 
共用 辅助 函数 (如 图 2-2 所 示 )。 这 些 应 用 需要 的 抽象 程度 不 高 ， 因 为 在 JavaScript 中 已 
经 有 一 些 流行 的 库 支持 在 客户 端 和 服务 器 端 之 间 共 用 代码 ， 比 如 Underscore.js (http:// 
underscorejs.org/) 和 Lodash.js (https://lodash.com/)。 
































2-1: 同 构 JavaScript 图 谱 




















图 2-2: 共享 视图 层 


在 图 谱 的 右 侧 ， 客 户 端 和 服务 器 端 共 享 整个 应 用 (如 图 2-3 所 示 )。 II 
层 、 应 用 程序 流 、 用 户 访问 限制 、 表 单 验 证 、 路 由 逻辑 、 模 型 和 状态 需要 的 抽 
象 程度 更 高 ， 因 为 客户 端 代码 的 执行 上 下 文 是 DOM (document 而 wm ， 
型 ) 和 window， 而 服务 器 端 代码 的 执行 上 下 文 是 一 个 请 求 /响应 对 象 。 



































模型 














图 2-3: 共享 整个 应 用 








在 本 书 的 第 二 部 分 中 ， 我 们 将 深入 了 解 客户 端 和 服务 器 端的 代码 共享 机 制 。 
但 本 章 将 通过 介绍 在 客户 端 和 服务 器 端 共享 代码 的 功能 不 同 的 几 种 应 用 ， 简 
要 地 探索 图 谱 两 端的 机 制 差 异 。 我 们 也 将 明确 指出 需要 的 某 些 抽象 ， 以 便 这 
些 功能 同 构 地 工作 。 


2.1 共享 视图 


通过 减少 用 户 在 跳 转 页 面 时 重新 加 载 完 整 页 面 的 次 数 ， 并 在 用 户 交 互 时 采用 泻 染 页 面 
部 分 内 容 的 方式 ，SPA 提供 了 更 加 流畅 的 用 户 体 验 。SPA 利用 客户 端 模 板 引擎 技术 来 
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接收 模板 (模板 中 包含 了 一 些 简 单 的 变量 占 位 符 )、 传 递 模型 上 下 文 对 象 、 执 行 并 输出 
HTML， 最 终 将 结果 插入 到 DOM 树 中 。 客 户 端 模 板 将 视图 标记 从 视图 逻辑 中 分 离 出 来 ， 
从 而 创建 更 加 易于 维护 的 代码 。 而 同 构 应 用 中 的 共享 视图 意味 着 模板 和 相对 应 的 视 
辑 都 需要 共享 。 


2.1.1 共享 模板 

为 了 获得 更 快 的 (感知 ) 性 能 和 更 佳 的 SEO 效果 ， 我 们 希望 服务 器 端 像 客户 端 一 样 能 够 泻 
染 任意 的 视图 。 在 客户 端 ， 模 板 泻 染 很 简单 ， 只 需要 对 一 个 模板 进行 求 值 ， 并 将 输出 插入 
到 某 个 DOM 元 素 即 可 。 但 在 服务 器 端 ， 同 一 个 模板 会 被 演 染 成 字符 串 并 在 响应 中 作为 结 
果 返 回 。 同 构 视 图 谊 桨 的 环 手 之 处 在 于 ， 客 户 端 需要 接手 完成 服务 器 端 未 完成 的 事情 。 这 
通常 称 为 从 客户 端 到 服务 器 端的 过 渡 (client/server transition) ， 也 就 是 说 ， 应 用 在 浏览 器 
中 加 载 完成 后 ， 客 户 端 需要 进行 适当 的 转换 ， 以 免 “破坏 ”服务 器 端 生成 的 DOM 字符 串 。 
服务 器 需要 将 应 用 状态 提取 到 一 个 对 象 中 〈 称 为 dehydrate) ， 并 发 送 给 客户 端 ， 随 后 客户 
端 需要 使 用 同一 状态 初始 化 应 用 ， 并 将 视图 还 原 (rehydrate) 为 与 在 服务 器 上 相同 的 状态 。 









































器 





逻 















































例 2-1 展示 了 一 种 典型 的 服务 器 响应 ， 即 在 页 面 的 body 部 分 泻 染 茶 些 标记 ,并且 使 用 
<script> 标签 输出 经 过 序列 化 的 状态 。 服 务 器 将 序列 化 状态 放 入 泻 染 的 视图 中 ， 客 户 端 需 
要 对 状态 进行 反 序列 化 ， 并 将 状态 和 预先 泻 染 的 标记 关联 起 来 。 


例 2-1 3 引入 服务 器 端 演 染 的 标记 与 状态 
<html> 
<body> 
<div>[[server_side_rendered_markup]]</div> 
<script>window.__state =[[serialized_state]]</script> 








bo 
</html> 
2.1.2 ”共享 视图 逻辑 
模板 的 helper 是 对 象 ， 如 数字 、 字 符 串 或 散 列 对 象 ， 通 常 比较 容易 共享 。 对 于 日 期 这 样 的 
格式 化 数据 的 共享 ， 许 多 格式 化 库 都 同时 支持 在 服务 器 端 和 客户 端 运行 ， 比 如 Moment.js 


可 以 同时 在 服务 器 端 和 客户 端 进行 日 期 的 解析 、 验 证 、 操 作 与 显示 。 另 外 ，URL 的 格式 化 
需要 在 路 径 前 面 添加 主机 名 和 端口 ， 而 在 客户 端 中 只 需要 简单 地 使 用 相对 URL 即 可 。 


2.2 ”共享 路 由 


大 部 分 现代 的 SPA 框架 都 支持 路 由 的 概念 ， 路 由 负责 在 用 户 跳 转 页 面 时 跟踪 用 户 的 状态 。 
在 SPA 中 ， 路 由 是 控制 跳 转 事件 、 改 变 状态 和 页 面 视图 ， 以 及 更 新 浏览 器 跳 转 历 史 的 主 
要 机 制 。 在 同 构 应 用 中 ， 我 们 同样 需要 一 套路 由 配置 (即将 URI 的 模式 映射 到 路 由 处 理 器 
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中 )， 而 且 这 套 配 置 能 够 在 服务 器 端 和 客户 端 之 间 方 便 地 进行 共享 。 共 享 路 由 的 难点 在 于 
路 由 处 理 器 自身 ， 因 其 经 常 需要 访问 与 环境 相关 的 API 来 获取 URL 信息 、HTTP 头 部 和 
cookie 等 。 在 服务 器 端 ， 这 些 信 息 可 以 通过 请 求 对 象 的 API 取得 ， 而 在 客户 端 则 需要 通过 
浏览 器 的 API 取得 。 


2.3 ”共享 模型 


模型 通常 被 称 为 业务 对 象 、 域 对 象 或 者 实体 。 通 过 移 除 状态 存储 并 从 DOM 恢复 ， 模 型 为 
数据 建立 了 一 种 抽象 。 在 最 简单 的 实现 中 ， 同 构 应 用 可 以 使 用 服务 器 端 返回 首 屏 响应 之 前 
一 模 一 样 的 状态 ， 对 客户 端 应 用 进行 初始 化 。 在 同 构 JavaScript 图 谱 的 一 个 极端 中 ， 服 务 
器 端 和 客户 端 共享 状态 与 模型 的 定义 规范 包括 双向 同步 〈 第 4 章 将 对 这 种 实现 进行 更 为 详 
细 的 探讨 ) 。 





















































2.4 ”小 结 


应 用 在 同 构 JavaScript 图 谱 中 可 以 处 于 不 同 的 位 置 。 客 户 端 和 服务 器 端 共用 的 代码 量 不 尽 
相同 ， 从 共享 模板 到 共享 应 用 的 整个 视图 层 ， 再 到 共享 应 用 的 大 部 分 逻辑 。 随 着 在 同 构 
JavaScript 图 谱 中 的 位 置 不 同 ， 应 用 可 能 需要 建立 更 多 的 抽象 。 在 下 一 章 中 , 我 们 将 会 讨论 
不 同类 别 的 同 构 JavaScript， 并 且 更 深入 地 分 析 这 些 抽象 。 




















同 构 JavaScript 图 谱 | 15 


第 3 章 


同 构 JavaScript 分 类 





Maxime Najim 


同 构 JavaScript (isomorphic JavaScript) 这 一 术语 公认 的 出 处 是 Charlie Robbins 在 2011 年 发 
表 的 博文 “Scaling Isomorphic Javascript Code” (https://blog.nodejitsu.com/scaling-isomorphic- 
javascript-code/)。 随 后 ， 这 个 术语 在 Spike Brehm 于 2013 年 发 表 的 博文 “Isomorphic JavaScript: 
The Future of Web Apps” (http://nerds.airbnb.com/isomorphic-javascript-future-web-apps/) 及 随 
后 的 一 些 文章 和 会 议 演讲 中 多 次 出 现 ， 并 因此 开始 流行 起 来 。 然 而 ， 在 JavaScript 社区 
(https:Wwww.oreilly.comyideas/renaming-isomorphic-javascript) ， 关 于 同 构 的 用 词 “isomorphic” 
曾 存在 一 些 和 争论。Michael Jackson (Reactjs 讲师 、react-router 项 目 作 者 之 一 ) 认为 ， 应 该 
将 “ 同 构 JavaScript” 称 为 “universal JavaScript” (https://medium.com/@mjackson/universal- 
javascript-4761051b7ae9#.h655sp39b)。Jackson 认为 universal 这 个 词 可 以 突出 “JavaScript 代 
码 不 仅 可 以 在 服务 器 端 和 客户 端 上 运行 ， 还 可 以 在 原生 设备 和 上 艇 入 式 架 构 上 运行 ”的 特点 。 


而 另 一 方面 ，isomorphism 是 一 个 数学 术语 : 对 于 两 个 数学 对 人 象 来 说 ， 如 果 我 们 简单 地 名 
略 它们 的 个 体 差异 ， 则 当 它 们 具有 相似 的 属性 和 操作 时 ， 就 是 同 构 的 。 当 我 们 将 这 个 概念 
应 用 到 图 论 中 时 ， 一 切 就 变 得 很 好 理解 了 。 图 3-1 中 的 这 两 个 图 就 是 很 好 的 例子 。 


尽管 这 两 个 图 看 起 来 差别 很 大 ， 但 它们 却 是 同 构 的 。 这 两 个 图 具有 相同 的 结 点 数 ， 而 且 每 
个 结 点 拥有 相同 的 边 数 。 但 它们 是 同 构图 的 真正 原因 是 ， 左 图 中 的 每 个 结 点 都 能 映射 到 右 
图 中 对 应 的 结 点 ， 并 且 同 时 保留 某 些 属性 。 比 如 ， 结 点 A 可 以 映射 到 结 点 1， 并 且 右 图 中 
结 点 1 的 相 邻 关系 和 结 点 A 是 一 致 的 。 事 实 上 ， 左 图 中 的 每 个 结 点 映射 到 右 图 后 都 保留 了 
原 有 的 相 邻 关系 。 






























































3-1: 同 构 的 图 


这 就 是 “ 同 构 ” 这 个 类 比 有 意思 的 地 方 。 要 想 让 JavaScript 代码 可 以 同时 在 客户 端 和 服务 
器 端 环境 中 运行 ， 这 些 环境 就 必须 是 同 构 的 ， 这 也 就 是 说 ， 应 该 存在 一 种 映射 ， 能 够 将 客 
户 端的 功能 映射 到 服务 器 端的 环境 中 ， 反 之 亦 然 。 正 如 图 3-1 中 的 两 个 同 构图 中 的 映射 关 
系 那 样 ， 同 构 JavaScript 环境 也 需要 有 映射 关系 。 





























在 JavaScript 中 ， 不 依赖 于 特定 环境 属性 的 代码 可 以 轻松 地 在 不 同 的 环境 中 同时 运行 ， 比 
如 那些 避免 使 用 window 和 request 对象 的 代码 。 但 对 于 req.path 和 window.Location. 
pathname 这 样 使 用 了 特定 环境 属性 的 代码 ， 则 需要 提供 一 种 映射 关系 (有 时 被 称 为 shim ) 
来 抽象 或 “填充 ”到 某 个 特定 环境 属性 中 。 这 使 得 同 构 JavaScript 分 成 了 两 大 类 : 与 环境 
无 关 的 ， 和 为 每 个 特定 环境 提供 shim 的 。 











命名 与 分 类 

同 构 JavaScript 是 一 个 不 断 演化 的 主题 ， 其 命名 与 分 类 也 在 定型 的 过 程 中 。 一 般 来 说 ， 
应 用 代码 可 以 分 为 两 种 类 别 : 使 用 了 环境 API (如 window 对 象 的 API) 的 代码 以 及 无 
须 使 用 特定 环境 API 的 代码 ， 后 者 无 须 额外 修改 即 可 “到 处 ”运行 。 针 对 使 用 了 环 
境 API 的 代码 ， 我 们 一 般 有 两 种 方案 : 一 是 修改 环境 ， 让 代码 可 以 同时 在 浏览 器 端 和 
服务 器 端 运行 ， 二 是 根据 环境 API 创建 一 个 抽象 层 ， 并 在 应 用 代码 中 使 用 这 些 抽象 方 
法 。 这 两 者 的 区 别 很 小 ， 还 有 人 建议 再 添加 第 三 种 类 别 ， 即 第 二 种 做 法 外 加 “保留 原 
有 语义 ”。 在 本 章 中 ,我 们 将 这 两 种 方案 统称 为 “为 每 个 特定 环境 提供 shim”。 关 于 命 
名 的 进一步 讨论 ， 请 参见 16.1.2 节 。 
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3.1 与 环境 无 关 的 代码 


与 环境 无 关 的 Node 模块 只 能 使 用 纯 JavaScript 的 功能 ， 并 且 不 能 使 用 环境 特定 的 API 或 
者 window (浏览 器 端 ) 和 process (服务 器 端 ) 这 样 的 属性 。 例 如 ，Lodash.js、Async.js、 


Momentjs、Numeraljs、Math.js 和 Handlebars.js 都 是 与 环境 无 关 的 。 
属于 这 一 类 别 ， 且 这 些 模块 都 能 够 很 好 地 在 同 构 应 用 中 运行 。 





事实 上 ， 很 多 模块 都 


唯一 需要 解决 的 问题 是 ， 这 些 Node 模块 是 使 用 Node 环境 中 的 require(module_id) 模块 装 
载 器 进行 加 载 的， 但 浏览 器 本 身 不 支持 Node 环境 中 的 require(...) 方 法。 要 想 处 理 这 个 
问题 ， 我 们 需要 一 个 负责 在 浏览 器 中 编译 Node 模块 的 构建 工具 。 目 前 有 两 个 主流 的 构建 








工具 可 以 完成 这 项 工作 ， 它 们 分 别 被 称 为 Browserify 和 Webpack。 





在 例 3-1 中 ， 我 们 使 用 Momentjs 定义 了 一 个 日 期 格式 化 方法 ， 这 个 方法 将 同时 在 服务 器 


端 和 客户 端 运行 。 
例 3-1 定义 一 个 同 构 的 日 期 格式 化 函数 
"Use strict'; 


var moment = require('moment'); //Node 环 境 特有 的 require 语 句 





var formatDate = function(date) { 
return moment(date).format('MMMM Do YYYY, h:mm:ss a'); 
}; 


module.exports = formatDate 





我 们 还 有 一 个 简单 的 mainjs 文件 ， 该 文件 会 调用 formatDate(..) 方法 ， 以 格式 化 当前 时 间 : 








var formatDate = require('./dateFormatter.js'); 
console.log(formatDate(Date.now())); 


当 在 服务 器 端 运行 main.js 时 (使 用 Node.js)， 我 们 会 得 到 如 下 输出 : 


$ node main.js 
July 25th 2015, 11:27:27 pm 





Browserify (http://browserify.org/) 是 一 个 编译 Common]JS 模块 的 工具 ， 该 工具 可 以 将 所 有 
引入 的 Node 模块 打包 起 来 ， 在 浏览 器 中 运行 。 借 助 Browserify， 我 们 可 以 输出 一 个 对 误 





览 器 友好 的 JavaScript 文件 : 


$ browserify main.js > bundle.js 





当 在 浏览 器 中 打开 bundle.js 文件 时 ， 我 们 可 以 在 浏览 器 控制 台中 看 到 相同 的 日 期 信息 (如 


3-2 所 示 )。 


<script src="bundle.js"></script> 
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July 25th 2015, 11:27:27 pm bundle.js (line 13) 








图 3-2: 运行 bundle.js 时 的 浏览 器 控制 台 输出 


在 继续 介绍 之 前 ， 我 们 先 暂 停 一 下 ， 回 想 一 下 刚才 发 生 的 事情 。 尽 管 这 只 是 一 个 简单 的 例 
子 ， 但 有 着 深远 的 影响 。 有 了 简单 的 构建 工具 后 ， 我 们 就 可 以 轻松 实现 从 服务 器 端 到 客户 
端的 逻辑 共享 。 这 就 带 来 了 许多 可 能 性 ， 我 们 将 在 本 书 的 第 二 部 分 深入 探讨 。 


3.2 为 每 个 特定 环境 提供 shim 


客户 端 和 服务 器 端的 JavaScript 环境 存在 许多 区 别 。 在 客户 端 ， 我 们 拥有 全 局 对 象 (如 
window) 以 及 各 种 API， 其 中 包括 localStorage、History API WebGL。 而 在 服务 器 
端 ， 我 们 在 一 个 请 求 /响应 生命 周期 的 上 下 文 环境 中 工作 ， 而 且 服 务 器 端 还 拥有 自身 的 全 
局 对 象 。 


如 果 在 浏览 嚣 中 运行 以 下 代码 ， 那 么 将 会 返回 浏览 器 当前 的 URL 地 址 。 改 变 这 个 属 ! 
值 将 会 导致 页 面 重 定向 : 























性 的 























console.log(window.location.href); 
window.location.href = 'http://www.oreilly.com' 


在 服务 器 端 运 行 同样 的 代码 则 会 返回 一 个 错误 : 





> console.log(window.Tlocation.href); 
ReferenceError: window is not defined 





这 是 因为 window 在 服务 器 端 不 是 一 个 全 局 对 象 。 为 了 在 服务 器 端 实现 相同 的 重 定向 功能 ， 
我 们 必须 在 响应 对 象 中 写 入 头 部 信息 ， 包 括 一 个 指明 URL 重 定 向 的 状态 码 (如 302) 以 及 
客户 端 将 要 跳 转 的 地 址 Location ; 











var http = require('http'); 

http.createServer(function (req, res) { 
ConsoLe.Log(req.path ) ; 
res.writeHead(302, {'Location': 'http://www.oreilly.com'}); 
res.end(); 

}) .listen(1337, '127.0.0.1'); 


正如 我 们 看 见 的 那样 ， 服 务 器 端的 代码 看 起 来 和 客户 端的 差异 很 大 。 那 么 如 何 让 同一 份 代 
码 在 两 端 都 能 运行 呢 ? 


我 们 有 两 种 可 选 方案 。 第 一 种 方案 是 将 重 定向 的 逻辑 分 离 到 一 个 独立 的 模块 中 ， 这 个 模块 
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需要 知道 当前 的 运行 环境 。 应 用 的 剩余 代码 只 需要 调用 该 模块 即 可 ， 从 而 实现 具体 环境 的 
完全 隔离 : 





var redirect = require('shared-redirect'); 
// 执行 一 些 有 趣 的 应 用 逻辑 ,判断 是 否 需要 进行 重 定向 


if(isRedirectRequired){ 
redirect('http://www.oreilly.com'); 


} 
// 继续 执行 有 趣 的 应 用 逻辑 


这 种 方式 使 得 应 用 逻辑 变 得 与 环境 无 关 ， 可 以 同时 在 客户 端 和 服务 器 端 运 行 。 虽 然 
redirect(..) 函数 的 实现 需要 考虑 到 特定 环境 ,但 其 逻辑 是 独立 的 ， 不 会 影响 到 应 用 的 其 
他 方面 。 以 下 是 redirect(..) 函数 的 一 种 实现 方式 : 


if (typeof window !== 'undefined') { 
window.location.href = 'http://www.oreilly.com’' 
}else{ 


this._res.writeHead(302, {'Location': 'http://www.oreilly.com’'}); 


} 
注意 ， 这 个 函数 必须 判断 window 对 象 是 否 存 在 ， 并 根据 情况 判断 是 否 使 用 它 。 


另 一 种 方法 是 ， 在 客户 端 使 用 服务 器 端的 响应 对 象 接 口 ， 但 需要 进行 shim， 实 质 上 还 是 调 
用 了 window 属性 。 通 过 这 种 方式 ， 应 用 代码 只 需要 调用 res.writeHead(..) 即 可 ， 但 是 这 
在 浏览 器 中 会 转 为 调用 window. location.href 属性 。 我 们 将 在 本 书 的 第 二 部 分 中 更 详细 地 
分 析 这 种 实现 方式 。 











3.3 “小结 


在 本 章 中 ， 我 们 探讨 了 两 种 不 同 的 同 构 JavaScript 代码 。 我 们 研究 了 如 何 简单 地 使 用 
Browserify 这 样 的 工具 ， 将 与 环境 无 关 的 Node 模块 代码 转换 到 六 览 器 中 。 此 外 ， 还 探讨 
了 与 环境 相关 的 代码 是 如 何 为 特定 环境 实现 shim 的 ， 以 允许 代码 在 客户 端 和 服务 器 端 重 
用 。 现 在 是 时 候 进 行 更 深层 次 的 讨论 了 。 下 一 章 将 超越 服务 器 端 泻 染 ， 研 究 如 何在 不 同 的 
解决 方案 中 使 用 同 构 JavaScript。 我 们 将 探索 创新 的 、 前 瞻 性 的 应 用 架构 ， 这 些 架 构 可 以 
使 用 JavaScript 来 完成 一 些 新 奇 的 事情 。 
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超越 服务 器 端的 泻 染 





Maxime Najim 








应 用 具有 不 同 的 规模 。 在 前 面 的 介绍 性 章节 中 ， 我 们 主要 关注 的 是 也 可 以 在 服务 器 端 进行 泻 
染 的 SPA。 服 务 器 泻 染 首 屏 页 面 的 目的 是 改善 页 面 的 感知 加 载 时间 并 实现 搜索 引擎 优化 。 这 
些 讨论 的 焦点 是 传统 的 应 用 架构 ， 即 客户 端 发 起 一 个 REST 调用 ， 然 后 被 路 由 到 某 个 无 状态 
的 后 端 服务 器 中 ， 接 着 服务 器 依次 查询 数据 库 ， 并 将 结果 返回 到 客户 端 (如 图 4-1 所 示 )。 















































4-1: 传统 的 Web 应 用 架构 


这 种 方式 非常 适合 传统 的 电 商 Web 应 用 。 然 而 ， 还 存在 一 种 通常 被 称 为 “实时 应 用 ”的 
应 用 。 事 实 上， 我 们 可 以 认为 有 两 种 同 构 JavaScript 应 用 : 一 种 是 可 以 在 服务 器 端 演 染 的 
SPA， 男 一 种 则 是 将 同 构 JavaScript 用 在 实时 、 离 线 及 数据 同步 等 功能 中 的 应 用 。 
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Matt Debergalis 将 实时 应 用 描述 为 应 用 架构 的 丰富 历史 中 的 一 个 自然 演化 步 
又 。 他 认为 应 用 架构 的 变化 是 由 以 下 因素 驱动 的 : 廉价 CPU 的 新 时 代 、 互 
联网 ， 以 及 移动 网 络 的 出 现 。 以 上 这 些 变化 都 促进 了 新 应 用 架构 的 发 展 。 
然而 ， 尽 管 我 们 已 经 看 到 了 更 复杂 的 、 支 持 实时 更 新 和 协同 工作 的 实时 应 
用 ,但 目前 的 大 多 数 应 用 依然 是 支持 服务 器 端 演 染 的 SPA。 但 是 ， 我 们 依 
然 认 为 实时 应 用 对 未 来 的 应 用 架构 至 关 重 要 ， 而 且 也 非常 切合 我 们 对 同 构 
JavaScript 应 用 的 讨论 。 
































4.1 实时 Web 应 用 


实时 应 用 拥有 丰富 的 界面 交互 和 协作 元 素 ， 允 许 用 户 之 间 共 享 数据 。 聊 天 应 用 Slack、 文 
档 共 享 应 用 Google Docs， 以 及 提供 共享 车 服务 并 实时 向 所 有 用 户 显示 当前 位 置 附近 可 用 
司机 的 Uber， 这 些 都 属于 实时 Web 应 用 。 对 于 这 类 应 用 ， 我 们 最 终 设 计 并 实现 了 将 数据 
从 服务 器 端 推送 到 客户 端的 一 种 方式 ， 以 便 显示 其 他 用 户 的 变化 。 我 们 还 需要 实现 一 种 更 
新 方式 ， 以 便当 数据 从 服务 器 端 发 送 过 来 时 ， 客 户 端 可 以 反应 性 地 更 新 每 位 用 户 的 屏幕 内 
容 。 大 部 分 的 实时 应 用 有 着 类 似 的 功能 。 这 些 应 用 必须 具备 以 下 功能 : 用 于 监听 数据 库 变 
化 的 机 制 ， 在 推送 技术 之 上 运行 的 某 种 协议 〈 如 Websocket) ， 以 便 将 数据 推送 到 客户 端 
(或 者 使 用 长 轮 询 来 模拟 服务 器 端的 数据 推送 ， 即 服务 器 端 需要 一 直 保 持 请 求 打开 的 状态 ， 
直到 新 的 数据 准备 好 并 发 送 到 客户 端 ) ， 以 及 某 种 客户 端 缓存 技术 ， 以 避免 在 重 绘 屏幕 时 
频繁 地 在 服务 器 端 往返 数据 。 












































在 图 4-2 中 ， 我 们 可 以 看 到 用 户 与 视图 的 交互 是 如 何 影响 数据 流动 的 。 我 们 还 可 以 看 到 ， 
来 自 其 他 客户 端的 变化 是 如 何 传播 到 所 有 用 户 的 ， 以 及 在 接收 到 服务 器 端 发 送 的 数据 变化 
后 ， 视 图 是 如 何 重 新 进行 谊 当 的 。 这 种 架构 催生 了 三 种 有 趣 的 同 构 概 念 : 同 构 API、 双 向 
数据 同步 ， 以 及 在 服务 器 端 进行 的 客户 端 仿真 。 

















控制 器 


模板 ， 














4-2: 实时 Web 应 用 架构 
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4.1.1 同 构 API 

在 同 构 的 实时 应 用 中 ， 客 户 端 和 本 地 数据 缓存 的 交互 方式 与 服务 器 端 和 后 台数 据 库 的 交互 
方式 十 分 类 似 。 服 务 器 端 代 码 可 以 对 数据 库 执行 一 条 语句 ， 客 户 端 代码 可 以 使 用 相同 的 数 
据 库 API 来 执行 相同 的 语句 ， 从 而 向 内 存 中 的 缓存 请 求 数据 。 客 户 端 API 与 服务 器 端 API 
之 间 的 这 种 对 称 性 通常 被 称 为 同 构 API。 同 构 API 可 以 将 开发 人 员 从 同时 兼顾 不 同 的 数据 
访问 策略 中 解放 出 来 。 更 重要 的 是 ， 同 构 API 可 以 让 客户 端 和 服务 器 端 同时 运行 应 用 的 核 
心 业务 逻辑 (尤其 是 在 模型 层 ) 与 泻 染 逻 辑 。 用 同 构 API 访问 数据 可 以 让 我 们 在 服务 器 端 
和 客户 端 之 间 共 用 一 套 代码 来 验证 数据 更 新 、 访 问 并 存储 数据 ， 以 及 改变 数据 。 过 去 ， 我 
们 需要 编写 多 个 版 本 的 代码 来 实现 同样 的 功能 ， 并 以 不 同 的 方式 来 测试 ， 而 且 在 改变 数据 
模型 时 必须 修改 两 遍 代 码 ， 而 现在 ， 我 们 只 需要 使 用 一 致 的 API 即 可 免除 这 些 烦恼 。 同 构 
API 遵循 了 DRY 原则 ， 这 种 实现 方式 是 智能 化 的 。 


4.1.2 ”双向 数据 同步 

实时 应 用 的 另 一 个 重要 方面 是 服务 器 的 数据 库 与 客户 端的 本 地 缓存 之 间 的 同步 。 从 客户 端 
到 服务 器 的 更 新 应 该 被 同步 到 客户 端的 本 地 缓存 中 ， 反 之 亦 然 。 实 时 同 构 框 架 中 一 个 很 
好 的 例子 是 Meteor.js， 该 框架 允许 开发 者 编写 可 以 同时 在 服务 器 端 和 客户 端 运行 的 代码 。 
Meteor 遵循 “处 处 是 数据 库 ”(Database Everywhere) 的 原则 。 在 Meteor 中 ， 客 户 端 和 服 
务 器 端 可 以 使 用 同一 套 同 构 API 访问 数据 库 。Meteor 还 在 客户 端 使 用 了 数据 库 抽 象 ， 比 
如 minimongo， 并 在 DDP (dynamic data protocol， 动 态 数据 协议 ) 之 上 使 用 了 observable 
collection， 目 的 是 保持 数据 在 服务 器 端 和 客户 端的 同步 。 驱 动 UI 变化 的 正 是 客户 端 数 据 
库 (而 非 服 务 器 端 数 据 库 )。 客 户 端 数据 库 需 要 进行 数据 的 “ 懒 ” 同 步 ， 以 保证 服务 器 端 
的 数据 可 以 及 时 更 新 。 这 使 得 客户 端 可 以 离线 工作 ， 并 在 本 地 环境 中 继续 处 理 用 户 数据 的 
变化 。 在 收 到 服务 器 端的 确认 返回 之 前 ， 客 户 端 的 每 一 次 写 入 操作 都 可 以 选择 性 地 推测 是 
写 人 客户 端的 本 地 缓存 中 的 。Meteor 有 一 种 内 建 的 延迟 补偿 机 制 ， 如 果 向 服务 器 写 入 数据 
库 失 败 或 者 写 入 被 另 一 个 客户 端 覆 盖 ， 那 么 就 会 刷新 推测 缓存 。 


4.1.3 在 服务 器 端 进行 客户 端 仿真 

在 极端 情况 下 ， 同 构 JavaScript 应 用 可 能 需要 为 每 一 个 客户 端 会 话 运行 独立 的 进程 。 这 使 
得 服务 器 端 可 以 查看 应 用 加 载 的 数据 并 主动 向 客户 端 发 送 数 据 ， 本 质 上 就 是 在 服务 器 端 模 
拟 UI。 这 种 技术 已 经 被 运用 到 了 Asana (https://asana.com/) 应 用 中 。Asana 是 一 个 协同 项 
目 管理 工具 ， 是 基于 一 个 被 称 为 Luna 的 内 部 闭 源 框 架 所 构建 的 。Luna 是 为 编写 实时 Web 
应 用 量 身 定 做 的 ， 用 法 与 Meteor.js 类 似 。 它 提供 了 一 套 通用 的 同 构 API， 用 于 在 客户 端 和 
服务 器 端 访 问 数据 。 然 而 ，Luna 真正 的 特别 之 处 在 于 ， 它 可 以 在 服务 器 端 运 行 应 用 的 一 份 
完整 的 副本 。 在 服务 器 端 ，Luna 通过 客户 端的 方式 执行 同一 份 JavaScript 代码 ， 从 而 模拟 
客户 端的 运行 。 当 用 户 在 Asana 的 界面 中 点 击 某 个 地 方 时 ， 客 户 端的 JavaScript 事件 会 同 





















































































































































超越 服务 器 端的 泻 染 | 23 


步 到 服务 器 端 。 通 过 执行 所 有 的 视图 与 事件 ， 服 务 器 端 维护 着 一 份 用 户 状态 的 完整 版 本 ， 
但 其 输出 仅仅 是 简单 的 HTML 内 容 。 











然而 ， 在 Asana 最 近 更 新 的 一 篇 技术 博文 (https://blog.asana.com/2015/05/the-evolution-of- 
asanas-luna-framework/) 中 ， 他 们 表示 正在 逐步 停 用 这 种 客户 端 / 服务 器 端 仿真 的 方式 。 这 
是 因为 其 性 能 存在 问题 ， 尤 其 是 在 服务 器 需要 模拟 UI 的 多 种 状态 ， 以 便 客户 端 可 以 立刻 
预测 和 预 加 载 数据 的 情况 下 。 这 篇 文章 还 提 到 了 移动 客户 端 的 版 本 问题 ， 如 果 客户 端 运 生 
的 代码 是 旧版 本 ， 那 么 就 会 导致 仿真 变 得 复杂 ， 因 为 服务 器 端 实际 运行 的 代码 版 本 可 能 会 
和 客户 端的 代码 不 一 致 。 























4.2 ”小结 


同 构 JavaScript 是 在 两 端 共享 应 用 代码 的 一 种 尝试 。 通 过 了 解 实时 的 同 构 框架 ， 我 们 找 
到 了 共享 应 用 逻辑 的 不 同方 案 。 这 些 框架 ee 而 不 仅仅 是 在 服务 器 端 
泻 染 一 个 SPA 那么 简单 。 关 于 这 些 概 念 的 讨论 已 经 很 多 了 ， 我 们 希望 这 些 讨论 能 为 同 构 
JavaScript 的 方方面面 提供 一 个 全 面 的 介绍 。 2 部 分 中 ， 我 们 将 基于 这 些 关键 
概念 来 创建 我 们 的 第 一 个 同 构 应 用 。 

















第 二 部 分 


构建 第 一 个 应 用 





优秀 的 软件 设计 的 关键 在 于 : 知道 需要 抽象 什么 、 何 时 进行 抽象 ， 以 及 在 何 处 进行 抽象 。 
如 有 果 抽象 过 度 或 者 过 早 地 进行 抽象 ， 那 么 结果 就 是 添加 了 一 层 没 多 少 价值 的 复杂 度 。 如 有 果 
抽象 程度 不 够 或 者 没有 在 恰当 的 地 方 进行 抽象 ， 那 么 就 会 造成 应 用 结构 脆弱 ， 难 以 文 撑 规 
模 扩 张 。 当 你 可 以 在 两 者 之 间 取 得 完美 的 平衡 时 ， 软 件 才 会 产生 真正 的 美 。 这 就 是 软件 设 
计 的 艺术 ， 工 程 师 欣 赏 这 种 艺术 ， 正 如 艺术 评论 家 欣赏 毕加索 或 者 伦 勃 衣 那 样 。 














在 本 书 的 这 一 部 分 中 ， 我 们 将 尝试 创造 美 。 许 多 前 人 已 经 走 过 了 我 们 这 条 路 ， 有 人 成 功 ， 
也 有 人 失败 。 而 我 有 幸 经 历 过 这 两 种 情况 ， 虽 然 其 中 的 失败 比 成 功 多 ， 但 我 在 每 一 次 失败 
中 都 有 所 收获 。 带 着 从 这 些 经 历 中 得 到 的 知识 ， 我 将 带领 大 家 穿 过 设计 过 程 中 的 层 层 障 
但 ， 实 现 一 个 轻 量 级 的 同 构 JavaScript 应 用 框架 。 








这 一 过 程 并 不 轻松 ， 大 部 分 人 都 会 在 形式 、 结 构 和 抽象 上 犯错 ， 但 我 已 经 准备 好 迎接 这 个 
挑战 了 ， 和 希望 你 也 如 此 。 虽 然 最 后 或 许 不 能 取得 完美 的 结果 ， 但 我 们 可 以 吸取 教训 并 应 用 
在 未 来 的 同 构 JavaScript 实践 中 ， 并 且 我 们 可 以 将 基础 打 好 ， 方 便 以 后 扩展 。 毕 竞 这 仅仅 
是 软件 进化 过 程 中 的 一 小 步 ， 也 是 我 们 学 习 过 程 中 的 一 小 步 。 你 准备 好 了 吗 ? 接 下 来 ,我 
们 将 从 头 开始 逐步 向 前 迈进 。 











Jason Strimpel 





我 们 已 经 对 同 构 JavaScript 有 了 充分 的 了 解 ， 现 在 是 时 候 从 理论 转 为 实践 了 。 在 本 章 中 ， 
我 们 将 奠定 基础 ， 并 在 此 之 上 逐步 建立 一 个 具有 完整 功能 的 同 构 JavaScript 应 用 。 这 个 基 
础 主要 由 下 列 技术 构成 。 








。 Node.js (https://nodejs.org/) 将 作为 应 用 的 服务 器 端 运 行 环境 。 它 是 一 个 基于 Chrome 
的 JavaScript 运行 环境 构建 的 平台 ， 可 以 让 你 轻松 地 构建 快速 的 、 可 扩展 的 网 络 应 用 。 
Node.js 使 用 了 事件 驱动 的 、 非 阻塞 的 IO 模型 ， 具备 轻 量 级 和 高 效 的 特点 ， 非 常 适合 
构建 在 分 布 式 设备 上 运行 的 数据 密集 型 的 实时 应 用 。 

。 Hapi.js (https://hapijs.com/) 将 用 于 驱动 应 用 中 的 HITP 服务 器 部 分 。 它 是 一 个 功能 丰 
富 的 框架 ， 可 以 用 于 构建 应 用 与 服务 。Hapi,js 帮助 开发 者 集中 精力 编写 可 重用 的 应 用 
逻辑 ， 而 不 是 将 时 间 花 费 在 基础 设施 的 构建 上 。 

。 Gulpjs (http://gulpjs.com/) 将 用 于 编译 我 们 的 JavaScript 代码 (将 ES6 转译 为 ES5)， 
针对 浏览 器 环境 进行 打包 ， 并 管理 我 们 的 开发 工作 流程 。 它 是 一 个 基于 Node 中 stream 
模块 的 流 处 理 构 建 系统 : 所 有 的 文件 操作 都 在 内 存 中 完成 , 除非 你 命令 其 进行 文件 写 入 ， 
否则 它 不 会 修改 任何 文件 内 容 。 

。 Babel.js (https://babeljs.io/) 让 我 们 可 以 利用 ES6 的 特性 和 语法 来 编写 代码 ， 然 后 帮 有 我 
们 将 代码 编译 为 兼容 ES5 的 可 发 布 版 本 。 它 是 一 个 用 于 编写 新 一 代 JavaScript 代码 的 编 

译 絮 。 
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ES6 和 ES2015 
ES6 又 称 为 ES2015。 在 制定 规范 和 审核 流程 的 后 期 ， ES6 更 名 为 ES2015， 但 这 个 
版 本 一 般 被 俗称 为 ES6。 如 果 想 了 解 更 多 关于 JavaScript 版 本 命名 约定 的 内 容 ， 请 参 
见 “ECMAScript 6 support in Mozilla” (https://developer.mozilla.org/en-US/docs/Web/ 
JavaScript/New_in_JavaScript/ECMAScript_6_support_in_Mozilla) 。 








直接 安装 整个 项 目 

如 果 你 对 于 Node、npm 和 Gulp 的 使 用 已 经 有 所 了 解 ， 那 么 你 可 以 跳 过 本 章 ， 
直接 通过 运行 npm instaLL thaumoctopus-mimicus@"0.1.x" 命令 来 安装 我 们 
最 终生 成 的 项 目 代码 。 




















一 士 Wh 
5.1 Node 的 安装 和 运行 
Node 的 安装 非常 简单 。Node 可 以 在 Linux、Mac OS、Windows 和 Unix 平台 上 运行 。 你 
可 以 选择 在 终端 编译 源码 来 安装 ， 使 用 包 管 理 器 (如 yum、homebrew 和 apt-get 等 ) 安装 ， 
或 者 在 Mac OS、Windows 平台 上 直接 通过 安装 程序 进行 安装 。 














5.1.1 从 源码 安装 

本 节 概 述 了 如 何 通过 编译 源码 来 安装 Node。 尽 管 我 强烈 推荐 通过 安装 程序 或 包 管理 器 的 
方式 进行 安装 ， 但 如 果 你 是 热 圳 于 通过 源码 安装 软件 的 少数 派 ， 那 么 这 一 节 的 内 容 可 以 帮 
到 你 。 和 否则， 请 跳 到 下 一 节 继 续 阅 读 。 

首先 ， 从 Nodejs.org 下 载 源 代码 : 


$ wget http://nodejs.org/dist/v0O.12.15/node-vO.12.15.tar.gz 


Node 版 本 

在 编写 本 书 时 ，node-v0.12.15.tar.gz 是 最 新 的 稳定 版 本 。 你 可 以 通过 https:/ 
nodejs.org/download/release/ 来 检查 最 近 更 新 的 版 本 ， 并 将 wget 示例 命令 中 
的 版 本 号 v0.12.15 替换 为 最 新 的 稳定 版 本 。 














接 下 来 ， 你 需要 从 下 载 的 文件 中 解压 出 源 代 码 : 
$ tar zxvf node-v0.12.15.tar.gz 


上 述 命令 解压 并 提取 出 Node 源 代码 。 要 想 详 细 了 解 有 关 tar 命令 的 更 多 选项 ， 可 以 在 终 
端 中 执行 man tar 来 查看 。 











现在 电脑 上 已 经 有 源 代 码 了 ， 你 需要 运行 源码 目录 中 的 配置 脚本 。 这 个 脚本 会 在 你 的 系统 
中 寻找 相应 的 Node 依赖 关系 ， 并 在 缺少 依赖 时 通知 你 。 


$ cd node-v0.12.15 
$ ./configure 


一 旦 找到 所 有 的 依赖 关系 ， 就 可 以 将 源码 编译 为 二 进 制 文件 了 。 这 项 工作 可 以 通过 nake 命 
令 来 完成 





$ make 


最 后 一 步 是 运行 make install 命令 。 由 于 Node 的 安装 是 全 局 性 的 ， 因 此 需要 sudo 命令 授 
了 予 管 理 特权 : 


$ sudo make install 


如 果 一 切 顺利 ， 当 检查 Node.js 版 本 时 ， 你 应 该 能 看 到 如 下 的 输出 信息 : 





$ node -v 
vO.12.15 


5.1.2 与 Node REPL 交 互 


Node 是 一 个 带 有 REPL (read-eval-print loop， 读 入 - 求 值 -打印 的 循环 ) 的 运行 时 环境 ， 
REPL 就 是 一 个 可 以 编写 JavaScript 代码 的 JavaScript shell， 在 你 按 下 回 车 键 后 ， 它 会 对 话 
句 进行 求 值 。 这 就 像 是 在 你 的 终端 中 拥有 Chrome 开发 者 工具 中 的 控制 台 一 样 。 你 可 以 堂 
试 输入 几 条 基本 的 命令 来 试验 一 下 : 























$ node 

> (new Date()).getTime(); 
1436887590047 

wh 

(^C again to quit) 

> 


$ 





这 个 功能 可 以 帮助 我 们 测试 和 调试 代码 片段 。 


5.1.3 ”使 用 npm 管 理 项 目 

npm (http://www.npmjs.com/) 是 Node 的 包 管 理工 具 。npm 让 开发 者 可 以 在 不 同 的 项 目 中 轻 
公 地 重用 代码 ， 并 与 其 他 的 开发 者 共享 代码 。npm 是 集成 在 Node 安装 包 中 的 ， 因 此 ， 在 安 
装 Node 的 同时 ， 你 其 实 已 经 装 好 了 npnm: 
































网 上 有 大 量 关 于 npnm 的 教程 和 丰富 的 文档 (https://docs.npmjs.com/) 可 供 参 考 ， 这 已 经 超 
出 了 本 书 的 讨论 范围 。 在 本 书 的 示例 中 ， 我 们 主要 会 用 到 packagejson 文件 ， 该 文件 中 包 
含 了 项 目的 元 数据 以 及 init 和 install 命令 。 我 们 将 通过 项 目 中 的 实际 例子 来 学 习 如 何 
利用 npm。 


5.2 ”建立 应 用 项 目 


当 谈 及 软件 项 目 管理 时 ， 除 了 源 代 码 管理 之 外 ， 另 一 个 最 重要 的 方面 就 是 打包 、 共 享 和 部 
署 代 码 的 途径 。 在 本 市 中 ， 我 们 将 使 用 npm 来 建立 项 目 。 

















5.2.1 初始 化 项 目 


npm 的 CLI (command-line interface， 命 令 行 界 面 ) 是 一 个 终端 程序 ， 可 以 让 你 快速 地 执行 
管理 项 目 和 软件 包 的 命令 。 其 中 一 个 命令 是 intt。 


























em 








如 果 你 已 I 的 使 用 方法 或 者 想 直 接 查 看 源 代码 ， 那 么 可 以 
直接 跳 到 下 一 








init 是 一 个 交互 式 的 命令 ， 该 命令 会 向 你 询问 一 系列 问题 ， 并 为 项 目 创建 一 个 package. 
json 文件 。 该 文件 中 包含 了 项 目的 元 数据 (包括 包 名 称 、 版 本 号 、 依 赖 关系 等 )。 这 些 
元 数据 用 于 将 软件 包 发 布 到 npm 仓库 中 ， 以 及 从 仓库 安装 软件 包 。 让 我 们 实际 运行 一 次 
该 命令 : 

$ npm init 


This utility will walk you through creating a package.json file. 
It only covers the most common items, and tries to guess sane defaults. 


See ‘npm help json ”for definitive documentation on these fields 
and exactly what they do. 


Use ‘npm instaLL <pkg> --save. afterwards to install a package and 
save it as a dependency in the package.json file. 


Press ^C at any time to quit. 


项 目 目录 

出 于 简洁 的 目的 ， 上 述 的 终端 代码 示例 省 略 了 计算 机 名 、 路 径 和 用 户 名 (如 
fantasticplanet:thaumoctopus-mimicus jstrimpel $)。 接 下 来 的 所 有 终端 命 
令 都 是 从 项 目 目录 中 执行 的 

















你 将 看 到 的 第 一 个 提示 是 让 你 输入 包 名 称 。 默 认 值 是 当前 目录 的 名 称 ， 在 我 们 的 示例 中 是 


thaumoctopus-mimicus 。 


name: (thaumoctopus-mimicus) 


项 目 名 称 
整个 第 二 部 分 构建 的 项 目的 名 称 就 是 thaumoctopus-mimicus。 我 们 会 为 这 一 
部 分 的 每 一 章 订 立 一 个 次 要 版 本 ， 例 如 本 章 的 版 本 号 为 0.1.x。 





点 击 回 车 键 继续 。 下 一 个 提示 是 输入 版 本 号 ; 
version: (0.0.0) 


目前 可 以 采用 6.0.9 作为 版 本 号 ， 因 为 才刚 刚 开始 ， 还 没有 任何 有 价值 的 内 容 可 以 发 布 。 
接 下 来 的 提示 是 输入 应 用 的 描述 : 


description: 
可 以 输入 Isomorphic JavaScript application example。 下 一 步 需 要 输入 项 目的 入 口 点 : 
entry point: (index.js) 


当 其 他 用 户 在 自己 的 源 代码 中 引入 你 的 包 时 ， 入 口 点 就 是 对 应 的 文件 。 目 前 使 用 index.js 
就 可 以 了 。 下 一 个 提示 是 输入 test 命令 。 留 空 即 可 (我们 不 会 具体 探讨 测试 的 内 容 ， 因 为 
这 超出 了 本 书 的 讨论 范围 








AS 


test Command : 











接 下 来 将 会 提示 你 输入 项 目的 GitHub 仓库 地 址 。 这 里 默认 提供 的 是 https://github.com/ 
isomorphic-javascript-book/thaumoctopus-mimicus.git， 也 就 是 本 项 目的 仓库 地 址 。 你 的 显示 


很 可 能 是 空白。 





git repository: 
(https://github.com/isomorphic-javascript-book/thaumoctopus-mimicus.git) 


下 一 个 提示 是 输入 项 目的 关键 词 : 
keywords: 
输入 isomorphic javascript。 然 后 ， 你 会 被 问 及 作者 的 名 字 : 


author: 





在 这 里 输入 你 的 名 字 。 最 后 一 个 提示 是 关于 开源 协议 的 。 默 认 值 可 能 是 (ISC) MIT 或 者 
(ISC)， 具 体会 根据 NPM 的 版 本 而 定 ， 这 刚好 是 我 们 所 需要 的 : 
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License: (ISC) MIT 


如 果 现在 切换 到 项 目 目录 中 ， 你 会 看 到 一 个 package.json 文件 ， 文 件 的 内 容 如 例 5-1 所 示 。 





例 5-1 通过 npm init 创建 的 package.json 文件 


{ 
"name": "thaumoctopus-mimicus", 
"version": "0.0.0", 
"description": "Isomorphic JavaScript application example", 
"main": "index.js", 
"scripts": { 
"test": "echo \"Error: no test specified\" && exit 1" 
由 
"repository": { 
"type": "git", 
"url": "https://github.com/isomorphic-javascript-book/thaumoctopus-mimicuys.git" 
}， 
"keywords": [ 
"isomorphic", 
"javascript" 
]， 
"author": "Jason Strimpel", 
"license": "MIT", 
"bugs": { 
| 册 B 
"https://github.com/isomorphic-javascript-book/thaumoctopus-mimicus/issuyes" 
"homepage": "https://github.com/isomorphic-javascript-book/thaumoctopus-mimicus" 


5.2.2 ”安装 应 用 服务 器 

在 上 一 节 中 ， 我 们 初始 化 了 项 目 ， 并 创建 了 一 个 包含 项 目 元 数据 的 packagejson 文件 。 虽 
然 这 是 一 个 必 经 的 过 程 ， 但 并 没有 为 我 们 的 项 目 添加 任何 功能 ， 这 个 过 程 本 身 也 不 是 很 有 
趣 。 因 此 ， 我 们 继续 下 一 步 ， 来 实现 一 些 更 有 意思 的 事情 。 














所 有 的 Web 应 用 都 需要 某 种 应 用 服务 器 ， 同 构 JavaScript 应 用 也 不 例外 。 无 论 是 仅仅 提供 
静态 文件 ， 还 是 基于 服务 请 求 与 业务 逻辑 组 装 HTML 文档 响应 ， 应 用 服务 器 都 是 一 个 必 不 
可 少 的 部 分 ， 因 此 我 们 选择 从 这 里 开始 编码 旅程 。 我 们 将 会 使 用 hapi (http://hapijs.com/) 
来 创建 应 用 服务 器 。 安 装 hapi 是 一 个 非常 轻松 的 过 程 : 








$ npm install hapi --save 


上 述 命 令 不 仅 安 装 了 hapi， 还 在 项 目的 package.json 文件 中 添加 了 一 条 依赖 项 。 这 样 做 是 
为 了 方便 他 人 (当然 也 包括 你 自己 ) 在 安装 你 的 项 目 时 ， 可 以 同时 安装 运行 该 项 目 所 需要 
的 所 有 依赖 。 


既然 已 经 安装 了 hapi， 接 下 来 就 可 以 编写 第 一 个 应 用 服务 器 了 。 第 一 个 示例 的 目标 是 响应 
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hello world 文本 。 在 你 的 index.js 文件 中 输入 例 5-2 中 的 代码 。 


例 5-2 hapi 输出 hello world 的 示例 


var Hapi = require('hapi'); 


// 创建 一 个 服务 器 ,并 配置 主机 名 与 端口 
var server = new Hapi.Server(); 
server.connection({ 

host: 'localhost', 

port: 8000 
]); 


// 添加 路 由 
server .route({ 
method: 'GET', 
path:'/hello', 
handler: function (request, reply) { 
reply('hello world'); 
} 
]); 


// 启动 服务 器 

server.start(); 
在 终端 中 输入 node .来 启动 该 应 用 ， 并 在 浏览 器 中 打开 http://localhost:8000/hello。 如 果 你 
能 看 到 hello world 的 字样 ， 那 么 蕉 喜 你 ， 你 成 功 了 ! 否则 ， 请 回 到 上 一 节 中 检查 你 或 者 我 
是 否 遗 漏 了 某 些 步骤 。 如 果 所 有 的 方法 都 失败 了 ， 你 可 以 尝试 将 这 段 存 放 在 gist 上 的 代码 
(https://gist.github.com/jstrimpel/3b2770558b2b397f616f) 直接 复制 到 你 的 index.js 文件 中 。 























5.2.3 ”编写 下 一 代 的 JavaScript (ES6) 

ECMAScript 6 (http://www.ecmascript.ore/， 简 称 ES6) 是 编写 本 书 时 JavaScript 的 最 新 版 
本 ， 该 版 本 为 这 门 语言 添加 了 许多 新 功能 。 这 一 规范 是 在 2015 年 6 月 17 日 被 批准 并 公布 
的 。 虽 然 大 家 对 某 些 新 功能 的 意见 不 一 〈 比 如 类 的 引入 )， 但 总 体 来 说 ，ES6 还 是 深 受 欢 
迎 的 。 在 编写 本 书 时 ， 许 多 公司 已 经 广泛 采用 ES6。 





和 许多 非 原生 实现 一 样 ，ES6 中 的 类 仅仅 是 原型 继承 的 语法 糖 。 之 所 以 将 这 
项 特性 添加 到 JavaScript 中 ， 很 可 能 是 为 了 让 语言 能 够 提供 一 个 共同 的 参照 
框架 ， 以 吸引 那些 来 自传 统 类 继承 语言 的 开发 者 。 类 的 使 用 将 贯穿 本 书 。 

















业内 已 经 达成 了 普遍 共识 ， 开 始 利 用 ES6 提供 的 新 特性 ， 虽 然 这 些 功 能 尚未 得 到 广泛 支 
持 ， 但 现在 可 以 通过 将 ES6 编译 为 支持 度 较 高 的 ECMAScript 版 本 ( 即 ES5) 来 解决 这 个 
问题 。 编 译 过 程 的 一 部 分 内 容 就 是 为 目标 版 本 中 人 缺失 的 ES6 特性 提供 polyfill。 鉴 于 这 种 行 
业 趋 势 以 及 现成 的 编译 支持 ， 我 们 将 在 本 书后 续 的 示例 中 利用 ES6 进行 编号。 现在 我 们 先 
将 上 一 个 示例 中 的 代码 修改 为 ES6 版 本 。 
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首先 ， 我 们 要 改变 在 index.js 文件 中 导入 hapi 依赖 的 方式 。 将 index.js 文件 中 的 第 一 行 替 
换 为 如 下 内 容 : 


import Hapi from 'hapi'; 


ES6 为 JavaScript 引入 了 模块 系统 的 概念 ， 这 个 概念 从 JavaScript 诞生 起 就 一 直 缺 失 。 在 
原生 模块 接口 一 直 缺 失 的 情况 下 ， 其 他 一 些 模式 的 出 现 填补 了 这 一 空白 ， 比 如 AMD 和 
CommonJS。 在 例 5-2 原版 的 index.js 文件 中 ，require 语法 就 遵循 了 CommonJS 规范 。 





之 所 以 没有 原生 模块 接口 ， 是 因为 在 创造 JavaScript 时 ， 人 们 并 没有 料 到 它 
能 够 像 今天 这 样 驱动 应 用 。 设 计 JavaScript 的 目的 仅仅 是 为 了 提高 网 页 的 吸 
引力 ， 并 丰富 客户 端 体验 。 

















接 下 来 需要 修改 server 变量 声明 。 将 文件 的 第 二 行 殖 换 为 : 
const server = new Hapi.Server(); 


在 ES6 中 ,const 是 声明 变量 的 一 种 新 方法 。 当 一 个 变量 使 用 const 声明 时 ， 不 能 修 
改 其 引用 。 举 例 来 说 ， 如 果 通 过 const 创建 一 个 对 象 ， 当 你 想 要 向 对 象 中 添加 属性 时 ， 
JavaScript 不 会 抛 出 异常 ， 因 为 引用 没有 被 修改 。 然 而 ， 如 果 你 试图 将 变量 指向 另 一 个 对 
象 ， 这 将 会 导致 错误 ， 因 为 引用 被 修改 了 。 我 们 在 这 里 使 用 const 是 因为 不 希望 出 现 不 小 
心 将 server 变量 指向 另 一 个 引用 的 情况 。 


























const 不 是 指 变量 值 不 能 被 修改 ， 而 是 指 在 内 存 中 存放 了 一 个 值 的 常 引用 。 





例 5-3 展示 了 修改 完成 后 的 index.js 文件 。 
例 5-3 ES6 版 本 的 hapi 输出 hello world 的 示例 


import Hapi from 'hapi'; 


// 创建 一 个 服务 器 ,并 配置 主机 名 与 端口 
Const server = new Hapi.Server(); 
server.connection({ 

host: 'localhost', 

port: 8000 
]); 


// 添加 路 由 
server .route({ 
method: "GET ' ， 
path:'/hello', 
handler: function (request, reply) { 








reply('hello world'); 
} 
]); 


// 启动 服务 器 

server.start(); 
我 们 已 经 将 index.js 文件 修改 为 使 用 最 新 、 最 好 的 ES6 语法 ， 现 在 是 时 候 尝试 运行 了 。 运 
行 的 Node 版 本 不 同 ， 运 行 的 结果 也 会 有 所 区 别 ， 这 也 就 是 说 ， 训 览 右 可 能 不 会 谊 染 hello 
world 了 。 这 是 因为 你 运行 的 Node 版 本 不 一 定 支 持 ES6。 好 在 这 个 问题 是 可 以 解决 的 ， 因 
为 编译 器 可 以 帮助 我 们 将 ES6 代码 编译 为 可 以 在 Node 4+ 中 运行 的 代码 。 
































5.2.4 ”将 ES6 编 译 为 ES5 

在 本 章 的 开头 部 分 ， 我 们 提 到 了 一 个 名 为 Babel (https://babeljs.io/) 的 JavaScript 编译 工 
具 。 我 们 将 在 本 书 的 余下 内 容 中 使 用 Babel 来 编译 JavaScript， 但 在 此 之 前 ， 我 们 需要 先 安 
装 Babel 和 ES2015 的 转换 包 。 








$ npm install --save-dev babel-cli babeL-preset-es2015 


Babel 的 插件 与 预 设 

默认 情况 下 ，Babel 自身 不 会 进行 任何 转换 ， 它 使 用 插件 来 转换 代码 。 在 上 
述 命 令 中 ， 我 们 安装 了 一 个 预 设 ， 这 个 预 设 对 应 一 个 或 者 一 系列 配置 好 的 插 
件 ， 用 于 将 ES6 代码 转换 为 ES5 代码 ， 以 便 让 代码 可 以 在 旧版 本 的 浏览 器 或 
者 旧版 本 的 Node 环境 下 运行 。 








就 像 hapi 的 安装 命令 一 样 ， 上 述 命令 会 将 Babel 作为 依赖 项 添加 到 你 的 package.json 文件 
中 。 唯 一 不 同 的 地 方 是 ， 我 们 传递 的 参数 是 - -save-dev 而 不 是 - -save， 因 此 这 一 项 依赖 会 
被 归 到 package.json 的 devDependencies 属性 当中 ， 而 不 是 在 dependencies 当中 。 这 样 做 
的 原因 是 ， 运 行 你 的 应 用 是 不 需要 Babel 的 ， 但 它 是 开发 过 程 中 所 需要 的 依赖 。 这 种 区 分 
可 以 让 使 用 者 清楚 地 知道 生产 环境 和 开发 环境 所 需要 的 依赖 分 别 是 什么 。 当 你 的 项 目 通 过 
--production 标记 安装 时 ，Babel CLI 将 不 会 被 安装 。 




















现在 我 们 已 经 成 功 地 安装 了 Babel， 接 下 来 就 可 以 编译 index.js 了 。 在 此 之 前 ， 我 们 应 该 先 
对 项 目的 目录 结构 进行 一 些小 调整 。 


如 果 按 照 现 有 的 项 目 结构 来 编译 index.js 文件 ， 那 么 我 们 的 源 代码 将 会 被 覆盖 一 一 在 没有 
备份 的 情况 下 丢失 源 代码 可 不 是 什么 好 事 。 解 决 该 问题 的 方法 是 ， 给 Babel 指定 一 个 输出 
文件 。 通常 的 约定 是 将 项 目 发 布 的 目录 称 为 dist， 源 码 目录 称 为 src。 因 为 我 不 是 一 个 喜欢 
发 明 新 标准 的 人 ， 所 以 我 们 还 是 遵循 这 种 约定 : 











$ mkdir dist 
$ mkdir src 
$ mv index.js src/index.js 
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将 项 目的 目录 结构 调整 为 适合 编译 的 结构 后 ， 我 们 需要 修改 package.json 文件 。 首 先 ， 通 
过 将 "main": "index.js," 这 一 行 修改 为 "main":"./dist/index.js",， 我 们 将 main 属性 指 
向 新 的 发 布 目录 ， 这 样 做 是 为 了 告诉 Node 应 用 的 新 入 口 点 ， 以 便 在 执行 node . 命令 时 能 
够 加 载 正 确 的 脚本 。 现 在 我 们 已 经 准备 好 进行 第 一 次 编译 了 ! 在 命令 行 中 输入 如 下 命令 : 

















$ babel src/index.js --out-file dist/index.js 

Command Not Found! 

如 果 在 执行 命令 时 出 现 “Command not found!” 错 误 ， 那 么 你 可 能 需要 指 
明 Babel 可 执行 程序 的 路 径 ， 即 ./node_moduLes/.bin/babeL， 或 者 通过 npm 
install -g babel-cli 来 全 局 性 地 安装 babel 命令 。 














上 述 命 令 取 得 了 源 代码 src/index.js， 然 后 进行 编译 ， 并 创建 了 发 行 版 的 目标 文件 dist/index. 
js。 如 果 一 切 顺 利 ， 现 在 应 该 可 以 再 次 使 用 node . 命令 来 启动 我 们 的 服务 器 了 。 
Babel 和 ES6 特性 


在 上 面 这 几 节 中 ， 我 们 仅仅 是 浅显 地 介绍 了 Babel 和 ES6。 要 想 了 解 更 多 信 
息 ， 请 访问 网 址 https://babeljs.io/。 








5.2.5 建立 开发 流程 

现在 我 们 已 经 有 能 力 随时 编译 代码 ， 并 通过 命令 行 来 重启 服务 器 ， 这 是 一 项 了 不 起 的 成 
就 。 但 在 开发 过 程 中 ， 每 次 都 要 停 下 来 执行 这 两 条 命令 会 让 你 很 快 就 疲 备 不 堪 。 好 在 我 们 
不 是 第 一 个 需要 自动 化 重复 任务 并 优化 工作 流程 的 人 ， 现 在 已 经 有 好 几 种 自动 化 方案 可 供 
选择 了 。 我 们 当然 想 要 选择 最 新 、 最 强大 的 方案 ， 以 便 我 们 的 代码 在 未 来 半年 内 不 至 于 变 
得 落后 。 最 近 新 增 到 JavaScript 构建 方案 的 工具 是 Gulp (http://gulpjs.com/)， 这 是 一 个 流 
处 理 构 建 系统 ， 你 可 以 在 Gulp 中 创建 任务 ， 并 使 用 其 社区 驱动 的 生态 系统 提供 的 各 种 插 
件 。 这 些 任务 可 以 链接 到 一 起 ， 从 而 创建 出 你 的 构建 流程 。 昕 起 来 很 棒 对 吧 ? 事 不 宜 迟 ， 
首先 需要 安装 Gulp: 
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$ npm install gulp --save-dev 


接 下 来 需要 在 项 目的 根 目录 中 创建 一 个 gulpfile.js 文件 ， 并 定义 一 项 默认 任务 ， 如 例 5-4 
所 示 。 


例 5-4 在 gulpfileijs 文件 中 创建 默认 的 Gulp 任务 


var gulp = require('gulp'); 








gulp.task('default', function () { 
console.log('default task success!'); 


}); 





安装 好 Gulp 并 定义 了 一 项 默认 任务 后 ， 现 在 来 运行 Gulp: 





$ gulp 

[20:00:11] Using gulpfile ./gulpfile.js 
[20:00:11] Starting 'default'... 

default task success! 

[20:00:11] Finished 'default' after 157 hs 


为 了 方便 代码 块 的 排版 ，Gulp 输出 中 的 所 有 绝对 路 径 都 会 被 转换 为 相对 路 
径 (如 ./gulpfilejs)。 但 在 你 的 屏幕 显示 的 输出 内 容 中 ， 你 看 到 的 将 会 是 绝对 
路 径 。 


Command Not Found! 

如 果 执 行 gutp 命令 时 出 现 了 “Command not found!” 错 误 ， 那 么 你 可 能 需 
要 指明 Gulp 可 执行 程序 的 路 径 ， 即 .node_modules/.bin/gulp， 或 者 通过 npnm 
install -9 gulp 来 全 局 性 地 安装 gulp 命令 。 














成 功 了 ! Gulp 已 经 可 以 运行 了 。 现 在 我 们 来 创建 一 项 实质 性 的 任务 ， 比 如 编译 源 代码 。 
这 需要 借助 gulp-babel 插件 (https:/www.npmjs.com/package/gulp-babel) 来 实现 ， 我 们 可 
以 通过 如 下 方式 进行 安装 : 

$ npm install gulp-babel --save-dev 
现在 需要 在 gulpfile.js 文件 中 修改 默认 任务 来 处 理 编译 。 用 例 5-5 所 示 的 代码 替换 你 之 前 创 
建 的 文件 内 容 ; 


例 5-5 使 用 gulp-babel 编译 源 代 码 


var gulp = require('gulp'); 
var babel = require('gulp-babel'); 





gulp.task('compile', function () { 
return gulp.src('src/**/*.js') 
.pipe(babel({ 
presets: ['es2015'] 
})) 
.pipe(gulp.dest('dist')); 
]); 


gulp.task('default', ['compile']); 
现在 再 次 运行 Gulp: 
$ gulp 


[23:55:13] Using gulpfile ./gulpfile.js 
[23:55:13] Starting 'compile'... 
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[23:55:13] Finished 'compile' after 251 ms 
[23:55:13] Starting 'default'... 
[23:55:13] Finished 'default' after 17 hs 
$ 


这 种 做 法 很 不 错 ， 但 还 没有 解决 我 们 之 前 的 问题 。 我 们 真正 做 到 的 事情 只 是 减少 了 在 终端 
需要 输入 的 代码 量 。 为 了 让 Gulp 的 引入 发 挥 真 正 的 价值 ， 我 们 需要 自动 化 编译 流程 ， 并 
在 每 次 保存 源 代码 文件 时 自动 重启 服务 器 。 




















1. 监听 源 代码 变化 

Gulp 包含 一 个 内 建 的 文件 监听 方法 gulp.watch (https://github.com/gulpjs/gulp/blob/master/ 
docs/API.md#gulpwatchglob%E2%80%94opts-tasks-or-gulpwatchglob%E2%80%94opts-cb ) ， 
该 方法 接收 的 参数 包括 文件 匹配 模式 (glob)、 可 选 参数 ， 以 及 一 个 任务 列表 或 回调 函数 。 
当 发 生变 化 的 文件 与 glob 匹配 时 ， 就 会 执行 任务 列表 或 回调 函数 。 我 们 正 需 要 通过 这 种 方 
式 来 运行 Babel 任务 ， 所 以 现在 可 以 进行 配置 了 。 将 下 列 任务 添加 到 gulpfilejjs 文件 中 

















gulp.task('watch', function () { 
gulp.watch('src/**/*.js', ['compile']); 
]); 


这 样 应 该 就 能 完成 我 们 一 直 以 来 的 目标 了 ， 所 以 将 任务 添加 到 默认 任务 中 : 
gulp.task('default', ['watch', 'compile']); 


如 果 现 在 在 终端 运行 9utp， 然 后 修改 代码 文件 ， 那 么 你 应 该 可 以 看 到 类 似 以 下 这 样 的 输出 
疆 


一 口 








[00:04:35] Using gulpfile ./gulpfile.js 
[00:04:35] Starting 'watch'... 

[00:04:35] Finished 'watch' after 12 ms 
[00:04:35] Starting 'compile'... 
[00:04:35] Finished 'compile' after 114 ms 
[00:04:35] Starting 'default'... 
[00:04:35] Finished 'default' after 16 hs 
[00:04:39] Starting 'compile'... 
[00:04:39] Finished 'compile' after 75 ms 








这 样 就 方便 多 了 ， 因 为 不 再 需要 在 每 次 修改 源 代码 时 都 运行 一 次 编译 命令 。 现 在 只 需要 让 
服务 器 自动 重启 即 可 。 


2. 在 发 行 版 内 容 变 化 时 重启 服务 器 

为 了 监听 发 行 版 的 文件 dist/index.js， 我 们 需要 借助 gulp-nodemon (https://www.npmjs.com/ 
package/gulp-nodemon)， 这 是 一 个 nodemon (http://nodemon.io/) 的 包装 层 。nodemon 是 
一 款 实用 工具 ， 用 于 监听 源 代码 的 变化 ， 并 在 发 生变 化 时 自动 重启 服务 器 。 在 使 用 gulp- 
nodemon 之 前 ， 先 要 进行 安装 : 



































$ npm install guLp-nodemon --save-dev 
接 下 来 需要 安装 run-sequence: 


$ npm install run-sequence --save-dev 




















这 个 包 以 特定 的 顺序 执行 一 系列 的 Gulp 任务 。 我 们 必须 借助 这 个 包 ， 因 为 我 们 需要 确保 
在 服务 器 启动 之 前 已 经 生成 发 行 版 的 文件 。 








现在 要 对 gulpfilejjs 进行 一 些 必要 的 修改 ， 告 诉 gulp-nodemon 何 时 应 该 重启 服务 器 ， 并 引 
入 run-sequence 包 。 在 文件 中 添加 以 下 内 容 : 





[nl 








var nodemon = require('gulp-nodemon'); 
var sequence = require('run-sequence'); 


gulp.task('start', function () { 
nodemon({ 
watch: 'dist', 
script: 'dist/index.js', 


ext: 'js', 
env: { 'NODE_ENV': 'development' } 


193 
}); 


最 后 ， 将 新 的 nodemon 监听 任务 添加 到 默认 任务 中 ， 并 使 用 run-sequence 指定 任务 的 执行 
顺序 : 











gulp.task('default', function (callback) { 
sequence(['compile', 'watch'], 'start', callback); 


}); 
现在 ， 当 运行 默认 任务 并 修改 源 代码 时 ， 你 应 该 能 看 到 类 似 以 下 这 样 的 输出 结果 : 


$ gulp 

[16:51:43] Using gulpfile ./gulpfile.js 

[16:51:43] Starting 'default'... 

[16:51:43] Starting 'compile'... 

[16:51:43] Starting 'watch'... 

[16:51:43] Finished 'watch' after 5.04 ms 
[16:51:44] Finished 'compile' after 57 ms 
[16:51:44] Starting 'start'... 

[16:51:44] Finished 'start' after 849 hs 
[16:51:44] Finished 'default' after 59 ms 
[16:51:44] [nodemon] v1.4.0 

[16:51:44] [nodemon] to restart at any time, enter ‘rs. 
[16:51:44] [nodemon] watching: ./dist/**/* 
[16:51:44] [nodemon] starting ‘node dist/index.js. 
[16:51:47] Starting 'compile'... 

[16:51:47] Finished 'compile' after 19 ms 
[16:51:48] [nodemon] restarting due to changes... 
[16:51:48] [nodemon] starting ‘node dist/index.js. 





gulpfile.js 文件 的 完整 版 如 例 5-6 所 示 。 


例 5-6 gulpfile.js 文件 的 完整 版 


var gulp = require('gulp'); 

var babel = require('gulp-babel'); 

var nodemon = require('gulp-nodemon'); 
var sequence = require('run-sequence ' ) ; 


gulp.task('compile', function () { 
return gulp.src('src/**/*.js') 
.pipe(babel({ 
presets: ['es2015'] 
})) 
.pipe(gulp.dest('dist')); 
]); 


gulp.task('watch', function () { 
gulp.watch('src/**/*.js', ['compile']); 
]); 


gulp.task('start', function () { 
nodemon({ 
watch: 'dist', 
script: 'dist/index.js', 


ext: 'js', 
env: { 'NODE_ENV': 'development' } 
}); 


}); 


gulp.task('default', function (callback) { 
sequence(['compile', 'watch'], 'start', callback); 


站 


5.3 ”小结 


本 章 介 绍 了 许多 内 容 ， 从 Node 的 安装 到 为 第 一 个 hapi 应 用 服务 器 优化 开发 流程 ， 其 中 还 


包括 了 ES6 的 使 用 。 以 上 这 些 都 是 为 现代 JavaScript 应 用 玫 
也 为 我 们 将 在 第 6 章 中 构建 的 示例 应 用 建立 了 基础 。 








完整 的 代码 示例 
通过 在 终端 中 运行 npm instaLL thaumoctopus-mi 


装 本 章 的 完整 代码 示例 。 








F 发 做 的 准备 。 同 时 ， 这 些 知识 





micus@"0.1.x" 命令 ， 可 以 安 
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第 6 章 


提供 第 一 份 HTML 文 档 





Jason Strimpel 








在 创建 同 构 JavaScript 框架 或 应 用 时 ， 大 部 分 人 都 会 选择 从 客户 端 逻 辑 开始 编写 ， 随 后 尝 
试 将 这 大 ,方案 整合 到 服务 器 端 。 这 可 能 是 因为 他 们 当初 开始 编写 的 仅仅 是 一 个 客户 端 应 
用 ， 随 后 才 意 识 到 需要 借助 同 构 JavaScript 提供 的 一 些 便利 ， 比 如 优化 页 面 加 载 速度 。 这 
种 方式 存在 的 问题 是 ， 客 户 端 应 用 的 实现 通常 是 与 浏览 器 环境 紧密 相连 的 ， 这 使 得 将 应 用 
转移 到 服务 器 端的 过 程 变 得 复杂 了 。 这 并 不 是 说 从 服务 器 端 开始 编写 就 能 免 受 特定 环境 问 
题 的 影响 ， 但 这 样 做 确实 可 以 保证 我 们 可 以 从 一 个 请 求 / 响应 生命 周期 的 思维 方式 来 开始 
编写 ， 这 正 是 服务 器 端 应 用 所 需要 的 。 真 正 的 优势 是 ， 我 们 不 需要 在 现成 的 代码 库 上 有 所 
投入 ， 因 此 我 们 可 以 从 头 开始 编写 ! 


6.1 提供 HTML 模 板 


在 构建 任何 抽象 或 者 定义 API 之 前 ， 为 了 熟悉 服务 器 端的 请 求 /响应 生命 周期 ， 我 们 首先 
提供 一 份 基 于 模板 的 HTML 文档 。 这 里 选用 Mozilla (https:/www.mozilla.org) 公司 提供 
的 Nunjucks (https://mozilla.github.io/nunjucks/) 模板 引 敬 。 在 之 后 的 示例 中 ， 我 们 将 一 直 
使 用 这 种 模板 语法 。 你 可 以 通过 如 下 方式 安装 Nunjucks: 






































$ npm install nunjucks -save 











安装 Nunjucks 后 ， 就 可 以 创建 模板 src/index.html， 其 内 容 如 例 6-1 所 示 。 
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例 6-1 使 用 Nunjucks 编写 HTML 文档 模板 


<head> 
<meta charset="utf-8"> 
<title> 
And the man in the suit has just bought a new car 
From the profit he's made on your dreams 
</title> 
</head> 
<body> 
<p>hello {{fname}} {{lname}}</p> 
</body> 
</html> 


在 模板 上 下 文中 ，Nunjucks 使 用 双重 花 括 号 来 演 染 变量 。 接 下 来 ， 修 改 ./src/index.js 文件 
中 的 内 容 ， 让 用 户 在 浏览 器 中 打开 localhost:8000/hello 时 能 够 返回 一 个 编译 出 姓氏 和 名 字 
的 模板 。 编 辑 后 的 文件 内 容 如 例 6-2 所 示 。 























例 6-2 提供 一 份 HTML 文档 (./src/index.js) 
import Hapi from 'hapi'; 


import nunjucks from 'nunjucks'; 


// 配置 Nunjucks 以 便 从 dist 目 录 中 读 取 内 容 


nunjucks.configure('./dist'); 





// 创建 一 个 服务 器 ,并 配置 主机 名 与 端口 
const server = new Hapi.Server(); 
server.connection({ 

host: "LocaLhost ' ， 

port: 8000 


有 5 
// 添加 路 由 


server.route({ 
method: 'GET', 
path:'/hello', 
handler: function (request, reply) { 
// 读 取 模板 并 使 用 上 下 文 对 象 进行 编译 
nunjucks.render('index.html', { 
fname: 'Rick', lname: 'Sanchez' 
}, function (err, html) { 
// 使 用 HTML 内 容 响 应 请 求 
repLy(ChtmL ) ; 
1 
} 
}); 


// 启动 服务 器 


server.start(); 
































我 们 对 第 5 章 中 的 代码 示例 作出 了 许多 修改 。 现 在 来 逐 项 分 解 并 讨论 这 些 内 容 。 首 先 
导入 了 nunjucks。 接 下 来 对 nunjucks 进行 了 配置 (https://mozilla.github.io/munjucks/api. 











提供 第 一 份 HTML 文 档 | 41 











html#configure)， 让 其 从 ./dist 目录 中 读 取 内 容 。 最 后 ， 使 用 nunjucks 读 取 模板 文件 /dist/ 
index.html， 并 使 用 上 下 文 变量 { fname: Rick，lname: Sanchez } 进行 编译 ， 编 译 结果 返回 一 
个 HTML 字符 串 ， 并 将 此 作为 服务 器 端的 回复 。 

















这 段 代 码 看 起 来 很 棒 ， 但 如 果 在 终端 运行 gutlp， 并 尝试 在 浏览 器 中 打开 localhost:8000/ 
hello， 你 会 发 现 服 务 器 端 只 返回 了 一 个 空 的 <body> 标签 。 为 什么 不 能 正常 运行 呢 ? 如 果 你 
还 记得 的 话 ， 我 们 是 在 ./sre 目录 中 创建 的 模板 ， 但 却 配置 nunjucks 让 其 从 ./dist 目录 中 读 
取 内 容 〈 这 确实 是 我 们 想 要 的 ， 因 为 ./dist 目录 包含 了 应 用 的 发 行 版 ， 而 ./src 目录 包含 了 
应 用 的 源 代码 )。 那 么 应 该 如 何 修复 这 个 问题 呢 ? 只 需要 修改 构建 流程 并 复制 模板 文件 即 
可 。 修 改 gulpfile.js 文件 ， 添 加 一 项 复制 任务 并 编辑 原来 的 监听 任务 和 默认 任务 ， 如 例 6-3 
所 示 。 




















例 6-3 将 模板 从 src 目录 复制 到 dist 目录 (修改 gulpfile.js) 
// 出 于 简洁 的 目的 ,省 略 部 分 原 有 代码 




















gulp.task('copy', function () { 
return gulp.src('src/**/*.html') 
.pipe(gulp.dest('dist')); 
]); 


gulp.task('watch', function () { 
gulp.watch('src/**/*.js', ['compile']); 
gulp.watch('src/**/*.html', ['copy']); 
}); 


// 出 于 简洁 的 目的 ,省 略 部 分 原 有 代码 




















gulp.task('default', function (callback) { 
sequence(['compile', 'watch', 'copy'], 'start', callback); 


}); 


如 果 现 在 在 终端 运行 9ulp， 并 在 浏览 器 中 打开 localhost:8000/hello， 我 们 应 该 能 够 成 功 地 
看 到 “hello Rick Sanchez” 了 。 

















这 个 结果 虽然 相当 不 错 ， 但 并 不 是 动态 的 。 如 果 想 要 改变 body 响应 中 的 姓名 ， 该 怎么 做 
呢 ? 我 们 需要 将 参数 传递 给 服务 器 ， 这 (在 概念 上 ) 与 向 函数 传递 参数 是 类 似 的 。 


pu sb hb 
6.2 ”使 用 路 径 参数 与 查询 参数 
应 用 经 常 需要 提供 动态 的 内 容 。 服 务 器 端 决定 了 这 部 分 内 容 ， 方 式 包括 路 径 参 数 、 查 询 参 
数 ， 有 时 候 还 会 用 到 会 话 cookie。 在 上 一 节 中 ， 欢 迎 信息 中 的 姓名 被 硬 编码 在 路 由 处 理 器 
中 ,但 没有 理由 不 让 姓名 的 值 由 路 径 参 数 决定 。 为 了 将 路 径 参 数 传递 到 路 由 处 理 器 中 ， 需 
要 修改 路 由 中 的 path 属性 ， 如 例 6-4 所 示 。 



























































例 6-4 在 ./src/index.jjs 文件 中 添加 路 径 参 数 


server .route({ 
method: 'GET', 
path:'/hello/{fname}/{lname}', 
handler: function (request, reply) { 
// 读 取 模板 并 使 用 上 下 文 对 象 进行 编译 
nunjucks.render('index.html', { 
fname: 'Rick', lname: 'Sanchez' 
}, function (err, html) { 
// 使 用 HTML 内 容 响 应 请 求 
reply(html); 
})3 


} 
}); 














通过 这 次 修改 ， 路 由 现在 能 够 匹配 localhost:8000/hello/morty/smith 和 localhost:8000/hello/jerry/ 
smith 这 样 的 URI 了 。URI 路 径 中 提供 的 新 值 被 称 为 路 径 参 数 (https://hapijs.com/api#path- 
parameters) ， 并 将 成 为 请 求 对 象 的 一 部 分 ， 可 以 通过 request.params.fname 和 request.params. 
lname 获取 这 两 个 参数 。 这 些 值 可 以 传递 到 模板 上 下 文中 ， 如 例 6-5 所 示 。 























例 6-5 ”访问 路 径 参 数 
server .route({ 
method: 'GET', 
path:'/hello/{fname}/{lname}', 
handler: function (request, reply) { 
// 读 取 模板 并 使 用 上 下 文 对 象 进行 编译 
nunjucks.render('index.html', { 
fname: request.params.fname, 
lname: request.params. lname 
}, function (err, html) { 
// 使 用 HTML 内 容 响 应 请 求 
repLy(htmL ) ; 
]); 
} 
1 














如 果 现 在 在 浏览 器 中 加 载 localhost:8000/helloyjerry/smith， 应 该 能 在 响应 体 中 看 到 路 径 参 
数 了 。 

通过 URI 传 值 的 另 一 种 方式 是 使 用 查询 参数 (https:/en.wikipedia.org/wikiyQuery_string) ， 如 
localhost:8000/hello?fname=morty&lname=smith 和 localhost:8000/hello?fname=jerry&lname=smith。 
要 想 支 持 查询 参数 的 使 用 ， 可 以 修改 路 由 ， 如 例 6-6 所 示 。 





例 6-6 访问 查询 参数 
server.route({ 
method: 'GET', 
path:'/hello', 
handler: function (request, reply) { 
// 读 取 模板 并 使 用 上 下 文 对 象 进行 编译 
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nunjucks.render('index.html', { 
fname: request.query.fname, 
lname: request.query.Lname 

}, function (err, html) { 
// 使 用 HTML 内 容 响 应 请 求 

reply(html); 

2 
} 

}3 


这 两 种 方式 都 可 以 在 路 由 中 获取 动态 值 ， 并 影响 输出 的 动态 内 容 。 你 可 以 同时 使 用 这 两 种 
选项 ， 并 提供 适当 的 默认 值 ， 以 创建 一 个 更 加 灵活 的 路 由 处 理 器 ， 如 例 6-7 所 示 。 
































例 6-7 同时 访问 路 径 参 数 与 查询 参数 
function getName(request) { 
// 默认 值 
Let name = { 
fname: 'Rick', 
lname: 'Sanchez' 


}; 
// 拆 分 路 径 参 数 


Let namepParts = request.params.name ? request.params.name.split('/') : []; 


// 优先 顺序 
// (1) 路 径 参 数 
// (2) 查询 参数 
// (3) 默认 值 


name.fname = (nameParts[0] || request.query.fname) || 
name. fname; 
name.Lname = (nameParts[1] || request.query.Lname) || 


name. Lname; 


return name; 


} 
// 添加 一 条 路 由 


server.route({ 
method: 'GET', 
path:'/hello/{name*}', 
handler: function (request, reply) { 
// 读 取 模 板 并 使 用 上 下 文 对 象 进行 编译 
nunjucks.render('index.html', getName(request), function (err，htmL) { 
// 使 用 HTML 内 容 响 应 请 求 
reply(html); 
}); 
} 
]); 


上 述 这 些 示例 是 为 了 简化 而 故意 编造 的 ， 目 的 是 让 我 们 可 以 将 关注 点 集中 在 概念 上 ， 但 在 
现实 世界 中 ， 路 径 参 数 与 查询 参数 经 常用 于 调用 服务 或 者 查询 数据 库 。 












































第 8 章 将 介绍 更 多 关于 路 由 的 细节 ， 其 中 包括 使 用 call (https://github.com/ 
hapijs/call) 来 创建 同 构 路 由 ， 这 是 hapi 使 用 的 一 个 HTTP 路 由 。 




















6.3 小结 

在 本 章 中 ， 我 们 学 习 了 如 何 基 于 渲染 动态 内 容 的 模板 来 提供 HTML 文档 ， 还 进一步 熟悉 了 
请 求 /响应 的 生命 周期 以 及 其 中 的 某 些 属 性 ， 如 request.params 和 request.query。 这 些 知 
识 将 会 贯穿 本 书 余 下 的 部 分 ， 并 用 于 构建 应 用 。 








完整 的 代码 示例 
通过 在 终端 中 运行 npm install thaumoctopus-mimicus@"0.2.x" 命令 ， 可 以 安 
装 本 章 的 完整 代码 示例 。 
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设计 应 用 架构 
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如 果 你 已 经 从 事前 端 开 发 很 长 时 间 了 ， 那 么 你 可 能 还 记得 MV* 框架 大 量 涌现 之 前 的 那 段 
日 子 。 与 那 时 相 比 ， 现 在 的 Web 开发 更 加 复杂 ， 也 进步 不 少 。 如 有 果 在 业界 的 时 间 再 长 一 
些 ， 你 大 概 还 能 想起 jQuery 出 现 之 前 的 时 光 。 对 我 而 言 ， 那 段 记 忆 充 满 了 挫败 感 ， 我 需要 
在 一 个 长 达 4000 行 ， 并 且 包 含 各 种 各 样 的 函数 和 “类 ”的 JavaScript 文件 中 进行 调试 ， 而 
且 这 个 文件 还 引用 了 另 一 个 有 4000 行 代码 的 JavaScript 文件 。 即 使 想 不 起 这 些 日 子 ， 你 应 
该 也 磁 到 过 这 样 难以 跟踪 、 令 人 钥 趟 的 代码 。 


在 大 多 数 情况 下 ， 挫 败 感 的 源头 是 因为 缺乏 形式 、 结 构 ， 而 这 正 是 良好 架构 的 基础 。 正 
如 James Coplien 和 Gertrud Bjgrnvig 在 Lean Architecture: For Agile Sofitware Development 
(Wiley) 中 提 到 的 那样 ,，“ 无 须 考虑 事物 是 由 什么 构成 的 ， 将 形式 视 为 事物 的 一 种 基本 形 
状 或 排列 ， 而 结构 则 是 形式 的 物化 ”。 在 我 们 的 示例 中 ， 形 式 的 一 个 例子 就 是 Application 
类 ， 它 负责 接受 路 由 定义 。 而 结构 的 一 个 例子 则 是 使 用 export 和 import 的 ES6 模块 格式 。 


另 一 个 被 过 度 使 用 的 架构 组 件 是 抽象 。 合 理 使 用 抽象 的 关键 在 于 只 在 必要 时 使 用 ， 因 为 隐 
藏 细节 会 让 代码 变 得 难以 跟踪 和 读 取 。 否 则 ， 你 会 遇 到 数 不 清 的 包 训 层 国 数 和 令 人 费解 的 
实现 ， 应 用 将 会 随 着 时 间 的 推移 而 变 得 非常 脆弱 。 在 开发 同 构 JavaScript 应 用 的 过 程 中 ， 
我 们 将 会 利用 抽象 来 解决 一 些 经 常 遇 到 的 问题 ， 比 如 cookie 的 获取 和 设置 ， 但 要 注意 不 能 
滥用 抽象 。 


在 早期 ， 重视 形式 与 结构 可 以 降低 意外 结果 出 现 的 可 能 性 ， 并 提高 代码 的 可 维护 性 。 对 抽 
象 的 合理 怀疑 可 以 确保 我 们 的 应 用 能 够 经 受 住 时 间 的 考验 (至 少 五 年 )。 
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7.1 理解 问题 


我 们 知道 自己 目前 正在 创建 的 是 同 构 JavaScript 应 用 ,但 “架构 ”的 含义 到 底 是 什么 呢 ? 
为 了 回答 这 个 问题 ， 首 先 要 定义 需要 解决 的 问题 。 我 们 的 目标 是 ， 在 Web 浏览 器 中 高 效 地 
提供 一 个 兼容 SEO 的 UI。 在 这 个 目标 中 ， 效 率 与 应 用 可 以 同时 在 客户 端 和 浏览 器 端 运行 
紧密 相关 ， 因 为 这 样 应 用 才能 利用 这 两 种 环境 带 来 的 便利 。 既 然 应 用 必须 在 客户 端 和 服务 
器 端 运行 ， 那 么 我 们 就 必须 考虑 如 何在 抽象 环境 的 同时 ， 避 免 引 入 不 必要 的 复杂 度 。 那 么 
从 哪里 开始 讨论 呢 ? 从 用 户 请 求 开 始 ， 讨 论 连 接 一 切 (http://radar.oreilly.com/2015/06/the- 
power-of-connection.html) 的 创新 方式 : URL。 


7.2 ”响应 用 户 请 求 


URL 是 连接 用 户 和 应 用 的 桥梁 。 应 用 使 用 URL 建立 特定 资源 的 映射 关系 ， 并 根据 应 用 逻 
辑 将 资源 返回 给 用 户 。URL 可 以 让 Web 运转 ， 因 此 也 是 向 应 用 添加 结构 的 一 个 合适 入 口 。 
在 上 一 章 的 示例 中 ， 我 们 使 用 了 hapi 的 server.route API 向 应 用 中 添加 路 由 来 响应 用 户 请 
求 。 这 种 实现 仅仅 适用 于 在 服务 器 端 运行 且 将 hapi 作为 应 用 服务 器 的 应 用 。 但 在 我 们 的 示 
例 中 ， 我 们 希望 应 用 不 仅 能 在 服务 器 端 运 行 ， 还 可 以 在 客户 端 运 行 ， 因 此 直接 引用 hapi 还 
不 够 。 此 外 ， 在 应 用 各 处 直接 使 用 hapi 的 API 会 导致 应 用 代码 和 hapi 强 耦 合 ， 进 而 导致 
你 以 后 很 难 在 需要 的 情况 下 替换 hapi 的 框架 。 


抽象 

人 们 有 时 候 会 将 抽象 考虑 得 太 过 长 远 。 例 如 ， 仅 仅 为 了 方便 以 后 替换 库 ， 就 
在 应 用 中 围绕 茶 个 库 创 建 API 包 右 层 ， 这 就 不 算是 一 个 好 的 理由 。 因 为 你 想 
要 解决 的 是 一 个 尚未 发 生 ， 而 且 可 能 永远 不 会 发 生 的 问题 ， 所 以 现在 将 时 间 
花费 在 这 里 并 不 明智 。 抽 象 应 该 能 够 立刻 〈 或 者 即将 ) 提供 价值 。 我 们 应 该 
使 用 良好 的 形式 和 结构 来 确保 软件 寿命 ， 而 不 是 过 多 、 过 早 地 进行 抽象 。 







































































7.2.1 创建 Application 类 

要 想 在 响应 用 户 请 求 时 提供 结构 ， 第 一 步 是 创建 一 个 Appticatton 类 ， 以 便 在 应 用 范围 
内 重用 。 创 建 这 个 类 的 目的 是 减少 模板 代码 ， 并 提供 接口 最 终 供 客户 端 与 服务 器 端 共 
同 使 用 。 












































在 定义 用 户 路 由 的 示例 中 ， 需 要 在 ./src/index.js 文件 中 用 到 Application 类 的 接口 ， 如 例 
7-1 所 示 。 








例 7-1 使 用 AppLication 类 
import Hapi from 'hapi'; 
import nunjucks from 'nunjucks ' ; 
import Application from './lib'; 
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// 配置 Nunjucks 以 便 从 dist 目 录 中 读 取 内 容 


nunjucks.configure('./dist'); 


// 创建 一 个 服务 器 ,并 配置 主机 名 与 端口 
Const server = new Hapi.Server(); 
server.connection({ 

host: 'localhost', 

port: 8000 
]); 


function getName(request) { 
// 出 于 简洁 的 目的 ,省 上 略 函数 体 代 码 
} 





const application = new Application({ 
// 响应 来 自 http://LocaLhost:8000/ 的 请 求 
'/': function (request, reply) { 
// 读 取 模板 并 使 用 上 下 文 对 象 进 行 编译 
nunjucks.render('index.html', getName(request), function (err, html) { 
// 使 用 HTML 内 容 响 应 请 求 
reply(html); 
}); 
} 
}, { 
server: server 


}); 

















application.start(); 





前 面 的 内 容 谈 到 了 要 正确 地 进行 抽象 。 在 这 个 示例 中 ， 对 服务 器 实例 化 的 
细节 进行 抽象 并 不 会 带 来 好 处 ， 因 此 我 们 没有 改动 。 如 果 配 置 内 容 的 增长 
让 应 用 的 文件 难以 跟踪 ， 或 者 需要 注册 大 量 的 hapi 插件 (http://hapijs.com/ 
plugins) ， 我 们 以 后 可 能 会 将 这 些 细节 分 离 到 一 个 独立 的 模块 中 。 





























如 果 看 到 例 7-1 后 ， 你 的 第 一 反应 是 “我 看 不 出 这 样 做 有 什么 好 处 ”， 别 担心 ， 这 种 反应 是 
正常 的 。 我 们 实现 一 个 Application 类 当然 不 能 仅仅 用 来 支撑 这 一 部 分 代码 ， 因 为 除了 封 
装 实现 细节 之 外 ， 这 样 做 没有 提供 任何 好 处 。 在 示例 中 ， 我 们 建立 了 一 个 基础 ， 并 在 这 个 
基础 之 上 进行 完善 ， 这 样 做 的 好 处 将 会 在 第 二 部 分 的 教程 中 逐渐 显露 出 来 。 明 确 了 这 个 示 
例 的 用 意 之 后 ， 来 继续 关注 其 实现 。 在 /src/lib/index.js 文件 中 定义 Application 类 ， 如 例 
7-2 所 示 。 














例 7-2 Application 类 
export default class Application { 


constructor(routes, options) { 
this.server = options.server; 
this.registerRoutes(routes); 


} 





48 | 第 7 章 


registerRoutes(routes) { 
for (Let path in routes) { 


this.addRoute(path, routes[path]); 


} 
} 


addRoute(path, handler) { 
this. server.route({ 
path: path, 
method: 'GET', 
handler: handler 
]); 
} 


start() { 
this. server.start(); 


} 
} 


现在 ， 我 们 已 经 封装 (fasade) 了 一 个 基本 的 应 用 ， 并 且 最 终 还 要 修改 客户 端 实现 。 这 是 
一 个 很 好 的 开始 ， 但 正如 前 面 提 到 的 那样 ， 除 了 为 随后 传输 到 客户 端 做 准备 之 外 ， 我 们 还 














没有 真正 为 应 用 添加 任何 东西 。 为 了 在 























现 阶段 增加 一 些 价值 ， 我 们 需要 适当 减少 路 由 定义 


的 代码 ， 并 为 响应 用 户 请 求 的 逻辑 添加 更 多 的 结构 。 


7.2.2 创建 控制 器 





通过 创建 一 种 通用 的 方式 来 响应 URL 请 求 ， 我 们 可 以 进一步 改进 结构 并 减少 模板 代码 。 
为 了 实现 这 一 点 ， 我 们 需要 创建 一 个 接口 ， 让 开发 人 员 可 以 针对 这 个 接口 进行 编码 。 正 如 





以 在 此 基础 上 继续 构建 。 











在 例 7-2 中 建立 的 应 用 结构 那样 ， 这 种 做 法 在 现 阶段 的 示例 中 不 会 有 什么 好 处 ， 但 我 们 可 


在 Struts、Ruby on Rails、ASP.Net 等 框架 中 ， 控 制 右 有 供 框架 调用 的 操作 方法 。 控 制 改 及 





其 操作 与 路 由 表 中 的 路 径 存 在 对 应 关系 。 这 些 操作 方法 包含 了 分 别处 理 传 和 人 请 求 和 响应 的 
业务 逻辑 。 在 示例 中 ， 我 们 想 要 响应 一 个 UI， 即 一 份 HTML 静 荷 数据 。 了 解 了 这 些 以 后 ， 
我 们 开始 定义 一 个 基本 的 接口 ， 如 例 7-3 所 示 (./src/lib/controller.js)。 





例 7-3 Controller 类 
export default class Controller { 


constructor(context) { 
this.context = context; 


和 


index(application, request, reply 
callback(null); 
} 


,， Callback) { 
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toString(caLLback) { 
callback(null, 'success'); 


} 
} 


constructor 方法 创建 了 Controller 类 的 一 个 实例 。context 参数 包含 了 与 路 由 相关 的 元 数 
据 ， 比 如 路 径 参 数 和 查询 参数 。 当 控制 器 实例 需要 在 操作 响应 请 求 后 持续 存在 时 ， 这 些 数 
据 就 能 够 在 客户 端 派 上 用 场 。 


index 方法 是 一 个 控制 器 实例 的 默认 操作 ， 该 方法 接收 4 个 参数 。 


(1) application 是 定义 路 由 的 Application 类 对 象 的 一 个 引用 。 在 将 来 需要 访问 应 用 层面 
的 方法 和 属性 时 ， 这 个 参数 十 分 有 用 。 

(2) request 即 hapi 的 request 对 象 。 这 个 参数 可 以 用 于 请 求 层 面 的 操作 ， 比 如 读 取 HTTP 
头 部 信息 或 cookie 的 值 。 这 个 对 象 未 来 将 会 被 规范 化 ， 以 便 在 客户 端 和 服务 器 端 可 以 
调用 相同 的 函数 方法 。 

(3) reply 即 hapi 的 reply 对 象 。 这 个 参数 可 以 用 来 重 定向 请 求 ， 如 reply.redirect(some/ 
ur1)。 这 个 对 象 未 来 也 将 会 被 规范 化 ， 以 便 可 以 在 客户 端 和 服务 器 端 调 用 相同 的 函数 方 
法 。 

(4) caLLback 是 一 个 遵循 Node 风格 的 回调 函数 (http://fredkschott.com/post/2014/03/ 
understanding-error-first-callbacks-in-node-js/) ， 用 于 处 理 异 步 控 制 流 。 如 果 函 数 
接收 的 第 一 个 参数 是 nuLL， 那 么 负责 调用 操作 方法 的 控制 器 就 会 进入 请 求 /响应 
的 生命 周期 中 。 如 果 国 数 接收 的 第 一 个 参数 是 Error (https://developer.mozilla. 
org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error) ， 那 么 应 用 就 会 
响应 一 个 错误 〈 后 文 将 会 详细 讨论 错误 响应 ) 。 



























































如 果 操 作 方 法 caLLback 成 功 执行 且 没 有 出 现 错误 ， 那 么 应 用 框架 随后 就 会 调用 tostring 
方法 。 一 个 成 功 的 caLLback 的 第 二 个 参数 应 该 是 需要 被 演 染 的 字符 串 。 


7.2.3 ”构造 控制 器 实例 

定义 好 响应 资源 请 求 的 合约 后 ， 就 可 以 将 更 多 与 定义 路 由 相关 的 逻辑 移 到 应 用 框架 中 。 
如 果 你 还 记得 的 话 ，./sre/index'js 文件 中 就 使 用 了 内 联 函数 来 包含 路 由 的 定义 (如 例 7-4 
所 示 )。 


例 7-4 内 联 路 由 处 理 絮 
const application = new Application({ 
// 响应 来 自 http://LocaLhost:8000/ 的 请 求 
'/': function (request, reply) { 
// 读 取 模板 并 使 用 上 下 文 对 象 进行 编译 


nunjucks.render('index.html', getName(request), function (err, html) { 
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// 使 用 HTML 内 容 响 应 请 求 
repLy(ChtmL ) ; 
]); 
} 


}, { 


server: server 


}); 





定义 好 一 个 基础 的 控制 器 后 ， 可 以 将 上 述 示例 修改 为 例 7-5 所 示 的 版 本 。 


例 7-5 使 用 Controller 类 


import Hapi from 'hapi'; 
import Application from './lib'; 
import Controller from './lib/controller' 


Const server = new Hapi.Server(); 
server .connection({ 

host: "LocaLhost ' ， 

port: 8000 
]); 


const application = new Application({ 
'/': Controller 


}, { 


Se Ve SerVer 


}); 


application.start(); 


现在 代码 看 起 来 好 多 了 。 我 们 成 功 地 移 除 了 泻 染 和 响应 的 实现 细节 ， 从 而 让 应 用 代码 
自 http:// 


更 加 容易 阅读 。 我 们 看 一 眼 就 可 以 很 快 知道 ，Controller 类 将 会 负责 
localhost:8000/ 的 请 求 。 这 才 是 一 个 真正 的 艺术 品 。 Ms 代码 现在 还 
我 们 需要 在 src/lib/index.js 文件 中 编写 逻辑 代码 ， 这 0 











能 正常 工 


芷 。 











Dm 








EE 说 


响应 请 求 的 实例 。 需 要 修改 的 地 方 是 Application 站 addRoute 方法 ， 如 例 7-6 所 示 。 示 


例 中 的 代码 创建 了 一 个 处 理 器 ， 这 个 处 理 器 又 创建 了 一 个 控制 器 实例 ， 并 遵 


命 周期 的 合约 。 


例 7-6 AppLication 类 的 addRoute 方法 


addRoute(path, Controller) { 
this.server.route({ 

path: path, 

method: 'GET', 

handler: (request, reply) => { 

const controller = new Controller({ 

query: request.query, 
params: request.params 


DD: 


controller.index(this, request, reply, (err) => { 
if (err) { 


循 了 控制 器 生 
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return reply(err); 


} 


controller.toString((err, html) => { 
if (err) { 
return reply(err); 


} 


reply(html); 
}); 
})3 
} 
}); 
} 


这 个 示例 引入 了 一 些 新 的 语法 。 如 果 对 箭头 函数 (https:/developer.mozilla.org/ 
en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) 并 不 熟悉 的 话 ， 
可 能 会 产生 一 些 疑 惑 。 在 这 个 示例 中 ， 使 用 箭头 函数 的 目的 是 实现 this 的 
绑 定 ， 从 而 无 须 额 外 创建 self 或 者 that 这 样 的 变量 ， 或 者 显 式 地 使 用 bind 
(https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ 
Function/bind) 函数 来 设 定 上 下 文 对 象 。 














如 果 现 在 在 浏览 器 中 打开 http://localhost:8000/， 你 应 该 可 以 看 到 “success” 提 示 信 息 。 这 
个 结果 符合 预期 ， 但 还 不 是 我 们 真正 想 要 的 。 





7.2.4 ”拓展 控制 器 

在 之 前 的 路 由 处 理 器 中 ， 我 们 将 ./src/index.html 的 文件 内 容 传递 到 Nunjucks 中 进行 编译 ， 
并 提供 一 个 context 对 象 ， 最 终 使 用 模板 函数 返回 的 字符 串 内 容 进行 响应 。 接 下 来 看 看 新 
架构 的 用 法 。 例 7-7 展示 了 一 个 拓展 后 的 Controller 类 (代码 保存 在 /src/HelloController.js 
中 )。 


例 7-7 拓展 基 类 控制 器 


import Controller from './lib/controller'; 
import nunjucks from 'nunjucks'; 




















// 配置 Nunjucks 以 便 从 dist 目 录 中 读 取 内 容 


nunjucks.configure('./dist'); 





function getName(context) { 
// 出 于 简洁 的 目的 ,省 上 略 函数 体 代 码 
} 





export default class HelloController extends Controller { 


toString(caLLback) { 
// 读 取 模板 并 使 用 上 下 文 对 象 进行 编译 
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nunjucks.render('index.html', getName(this.context), (err, html) => { 
if (err) { 
return callback(err, null); 


} 
callback(null, html); 
和 
} 


} 


这 个 函数 的 功能 和 例 7-4 所 示 功 能 基本 相同 ， 但 我 们 在 这 个 控制 器 中 封装 了 负责 响应 
http://localhost:8000/ 的 业务 逻辑 。 如 果 有 必要 ， 也 可 以 让 它 成 为 应 用 的 基 类 控制 器 ， 并 创 
建 一 些 约定 ， 以 根据 路 由 解析 对 应 的 模板 文件 。 例 如 ， 可 以 让 request.uri 成 为 context 
对 象 的 一 部 分 ， 并 根据 request.uri.path 在 ./dist 目录 的 相应 位 置 来 定位 模板 文件 。 我 们 
并 不 打算 在 此 实现 这 种 基于 约定 的 方案 ,但 这 里 想 说 明 的 关键 点 是 ， 你 可 以 将 应 用 中 特定 
的 通用 代码 放 在 基 类 控制 器 中 ， 以 促进 代码 重用 。 


接 下 来 需要 修改 ./src/index.js 文件 来 使 用 新 的 控制 器 ， 并 修改 路 由 路 径 ， 以 接受 可 选 的 路 
径 参 数 ， 如 例 7-8 所 示 。 


例 7-8 接受 路 径 参数 
import Hapi from 'hapi'; 
import Application from './lib'; 
import HelloController from './hello-controller'; 





























const server = new Hapi.Server(); 
server .connection({ 

host: "LocaLhost ' ， 

port: 8000 
]); 


const application = new Application({ 
'/hello/{name*}': HelloController 
J 


server: SerVver 


> 


application.start(); 


现在 ， 如 果 在 浏览 器 中 打开 http://localhost:8000/hello/{fname}/{lname}， 应 该 能 够 看 到 想 要 
的 欢迎 信息 了 oo 





7.2.5 ”改进 响应 流 

在 将 代码 移植 到 客户 端 之 前 ， 还 需要 修改 最 后 一 处 实现 。 在 控制 器 中 更 换 原 有 的 读 取 并 创 
建 HTML 响应 的 方式 ， 取 而 代 之 的 ， 创 建 一 个 返回 页 面 模板 的 API， 并 将 结果 注入 控制 器 
的 toString 回调 函数 中 。 新 版 本 的 ./src/HelloController.js 文件 如 例 7-9 所 示 。 
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例 7-9 创建 内 联 模板 


import Controller from './lib/controller'; 
import nunjucks from 'nunjucks'; 


function getName(context) { 


// 出 于 简洁 的 目的 ,省 略 函数 体 代码 





export default class HelloController extends Controller { 


toString(callback) { 
nunjucks.renderString('<p>hello {{fname}} {{lname}}</p>', getName(this.context), 
(err, html) => { 
if (err) { 


return callback(err, null); 


} 
callback(null, html); 


}); 
} 


} 


单 做 的 原因 是 ， 当 应 用 代码 转换 为 客户 端 SPA 之 后 


这 档 





HTML 内 容 ， 而 不 是 一 份 完整 的 文档 。 这 样 做 还 具有 性 能 


以 在 服务 











器 端 限制 文件 系统 IO 的 数量 。 而 在 客户 端 ， 可 以 





， 路 由 只 会 针对 每 条 路 由 返回 对 应 的 











下 的 优势 。 es 我 们 或 许可 
创建 一 个 包含 不 会 重复 泻 染 的 








页 眉 和 页 脚 的 基本 布局 ， 以 便 在 重 定向 时 不 需要 重新 解析 <script> 标签 。 的 角度 来 
看 ， 需 要 在 ./src/indexjs 文件 中 作出 这 些 修改 (如 例 7-10 所 示 )。 


例 7-10 











定义 应 用 的 HTML 文档 


import Hapi from 'hapi'; 

import Application from './lib'; 

import HelloController from './hello-controller'; 
import nunjucks from 'nunjucks'; 


// 配置 N 


nunjucks . 


unjucks 以 便 从 dist 目 录 中 读 取 内 容 
configure('./dist'); 





Const server = new Hapi.Server(); 


server.c 
host: 
port: 
}); 


onnection({ 
"LocaLhost ' ， 
8000 


const application = new Application({ 


' /hell 
By 


SerVver : 


o/{name*}': HelloController 


server, 


document: function (application, controller, request, reply, body, callback) { 
nunjucks.render('./index.html', { body: body }, (err, html) => { 


if 


(err) { 


return callback(err, null); 


} 
callback(null, html); 


}); 





3 


application.start(); 








这 些 修改 允许 我 们 将 控制 器 的 tostring 回调 函数 值 和 body 参数 注入 到 模板 内 容 中 ,并且 
可 以 脱离 具体 框架 的 选择 。 现 在 对 应 用 框架 代码 进行 修改 。addRoute 方法 的 最 终 版 本 如 例 
7-11 所 示 。 

















例 7-11 响应 资源 请 求 (Application 类 的 addRoute 方法 ) 
addRoute(path, Controller) { 
this.server.route({ 

path: path, 

method: 'GET', 

handler: (request, reply) => { 

const controller = new Controller({ 

query: request.query, 
params: request.params 


}); 


controller.index(this, request, reply, (err) => { 
if (err) { 
return reply(err); 


} 


controller.toString((err, html) => { 
if (err) { 
邮 return reply(err); 
} 


this.document(this, controller, request, reply, html, 
function (err, html) { 


if (err) { 
return reply(err); 
} 
reply(html); 
]); 
]); 
} 
}); 
} 








应 用 框架 现在 负责 组 合 HTML 文档 响应 ， 但 HTML 字符 串 构 造 的 实现 细节 则 留 给 应 用 开 
发 者 自行 决定 。 最 后 ， 我 们 需要 修改 模板 ， 如 例 7-12 所 示 (./src/index.html)。 


例 7-12 为 文档 主体 添加 出 口 
<head> 


<meta charset="utf-8"> 
<title> 











注 2: 在 新 版 本 的 Nunjucks 中 ， 下 述 代码 中 的 {{body}} 内 容 可 能 会 被 
月 























动 转 义 。 要 想 禁 止 自动 转 义 ， 可 以 使 
日 {{body | safe}} 或 nunjucks.configure({fautoescape: false}) 进行 全 局 配置 。 一 一 译 者 注 
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</ 
<b 


</ 
</ 





And the man in the suit has just bought a new car 
From the profit he's made on your dreams 

</title> 

head> 

ody> 

{{body}} 

body> 

html> 














如 果 在 浏览 器 中 打开 http://localhost:8000/hello/{fname}/{lname}， 你 现在 应 该 能 够 看 到 
“hello word” 了 。 











ES6 的 模板 字符 串 API (https://developer.mozilla.org/en-US/docs/Web/JavaScript/ 
Reference/Template_literals) 也 可 以 用 于 向 字符 串 中 竹 入 表达 式 。 之 所 以 没有 
使 用 这 个 API， 是 因为 我 们 是 从 文件 系统 中 读 取 内 容 的 。 要 想 将 文件 内 容 转 
换 为 模板 字符 串 ， 需 要 使 用 eval (用 法 为 evaL(templatestr);)， 但 这 种 做 
法 会 存在 某 些 安全 风险 。 














7-1 展示 了 完整 的 请 求 /响应 生命 周期 。 








浏览 器 端 服务 器 端 
1 1 


HTTP GET 请 求 























<controller>.index 


<controller>.toString 





<controller>.options.document 








X 





7-1: 请 求 / 响应 生命 周期 
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个 > 了 兰 


箱 7 和 草 


7.3 小结 


我 们 在 本 章 中 为 后 续 开发 建立 了 一 个 坚实 的 基础 ， 通 过 在 应 用 中 添加 形式 与 结构 完成 了 这 
项 任务 。 我 们 在 应 用 和 框架 之 间 定 义 了 明确 的 约定 ， 用 于 响应 资源 请 求 。 这 些 特意 的 设计 
和 会 帮助 我 们 在 未 来 更 加 便捷 地 更 换 应 用 中 的 技术 栈 ， 以 便 轻 松 应 对 大 量 的 更 改 ， 同 时 也 
有 助 于 尝试 使 用 新 技术 。 更 重要 的 是 ， 这 样 做 可 以 确保 应 用 的 稳定 性 。 在 下 一 章 中 ， 我 们 
将 开始 做 一 些 真正 有 趣 的 事情 ， 将 应 用 和 框架 移植 到 客户 端 














ET 











的 代码 示例 
过 在 终端 中 运行 npm install thaumoctopus-mimicus@"0.3.x" 命令 ， 可 以 安 
装 本 章 的 完整 代码 示例 。 
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第 8 和 章 


将 应 用 传输 到 客 尸 端 





Jason Strimpel 





到 目前 为 止 , 我 们 一 直 专 注 于 为 应 用 打造 坚实 的 基础 。 本 章 会 将 原本 只 能 在 服务 器 端 运行 
的 应 用 修改 为 在 客户 端 运行 ,开始 从 我 们 的 精心 策划 中 获得 便利 。 如 果 之 前 完成 的 工作 是 
有 效 的 话 ， 那 么 完成 这 项 任务 应 该 相当 轻松 ， 完 成 这 一 步骤 后 ， 我 们 就 将 拥有 一 个 功能 完 
善 的 同 构 JavaScript 应 用 核心 。 不 过 ， 在 开始 将 应 用 移植 到 客户 端 之 前 ， 需 要 对 构建 过 程 
进行 一 些 补 充 ， 并 修改 应 用 的 结构 。 


8.1 打包 应 用 的 客户 端 版 本 


为 了 让 应 用 在 客户 端 运行 ， 首 先 需 要 为 应 用 打包 一 个 文件 ， 其 中 包含 整个 应 用 的 源 代码 。 
这 个 文件 将 被 引入 ./src/index.html， 作 为 服务 器 端 提供 的 首 屏 响应 内 容 。 











[a 


























如 果 你 的 应 用 规模 比较 大 ， 那 么 可 能 需要 将 代码 分 割 成 多 个 小 文件 ， 以 改善 
首 屏 加 载 的 体验 。 





8.1.1 选择 打包 库 
谈 到 客户 端 应 用 打包 ， 目 前 社区 中 使 用 的 主流 打包 库 有 两 款 ;: Browserify (http://browserify. 
org) 和 Webpack (http://webpack.github.io/)。 
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异步 模块 定义 (Asynchronous Module Definition，AMD) 


第 三 款 打 包 库 称 为 RequireJS Optimizer (http://requirejs.org/docs/optimization. 
html)， 这 个 库 借 助 了 RequireJS， 而 RequireJS 遵循 了 AMD 模式 (https:/ 
github.com/amdjs/amdjs-api/blob/master/AMD.md)。AMD 是 指定 模块 定义 机 
制 的 一 个 API， 使 得 模块 及 其 相关 的 依赖 可 以 异步 加 载 。 然 而 ， 业 界 现在 更 
倾向 于 同步 模块 加 载 的 模式 ， 如 CommonJS (http://wiki.commonjs.org/wiki/ 
CommonJS) ， 因 此 我 们 不 会 讨论 这 部 分 内 容 。 



































通过 使 用 require 语法 来 引入 依赖 ，Browserify 可 以 让 你 像 编写 Node 应 用 那样 开发 客户 端 
应 用 。 它 还 提供 了 某 些 Node 核心 库 的 客户 端 版 本 ， 让 你 可 以 在 客户 端 引入 它们 ， 从 而 像 
在 服务 器 端 那 样 使 用 这 些 API。 








Webpack 可 以 为 客户 端 打 包 所 有 的 资源 类 型 ， 包 括 CSS、AMD、SASS、 图 片 、CoffeeScript 
等 。 它 包含 了 一 些 内 建 的 插件 ， 并 且 支 持 代 码 拆 分 的 概念 ， 这 使 得 你 可 以 轻松 地 将 应 用 分 割 
成 多 个 小 文件 ， 以 避免 在 初始 加 载 时 加 载 整个 应 用 的 内 容 。 






































这 两 个 库 都 是 很 不 错 的 选择 ， 使 用 哪 一 个 都 可 以 完成 相同 的 结果 。 只 不 过 它们 的 实现 方式 
存在 一 些 差异 。 本 书 选 择 使 用 Browserify， 因 为 它 在 我 们 的 用 例 中 不 需要 进行 太 复杂 的 配 
置 ， 更 加 容易 上 手 。 


8.1.2 ”创建 打包 任务 
在 这 一 节 中 ， 我 们 将 为 客户 端 创建 第 一 份 打 包 。 打 包 任 务 非常 容易 执行 ， 但 需要 进行 一 些 
初始 化 配置 。 这 个 过 程 的 第 一 步 是 安装 一 些 新 的 构建 工具 ， 我 们 从 browserify 模块 开始 : 














$ npm install browserify --save-dev 








在 接 下 来 的 过 程 中 ， 我 们 将 在 gulpfile.js 文件 中 利用 browserify 创建 一 项 任务 ， 即 构建 应 
用 打包 。 我 们 还 需要 安装 babelify 模块 : 





$ npm install babelify --save-dev 


Babelify (https://github.com/babel/babelify) 是 Browserify 的 转换 器 (https://github.com/ 
substack/browserify-handbook#transforms)， 用 于 将 源 代码 从 ES6 转换 为 ES5， 就 像 我 们 
的 compile 编译 任务 那样 。 这 在 现在 看 来 似乎 有 点 多 余 ， 但 如 果 未 来 需要 添加 其 他 的 转 
换 过 程 ， 比 如 brfs (https://github.com/substack/brfs)， 那 么 就 有 必要 对 源 代码 进行 打包 
并 使 用 转换 器 ， 而 不 是 对 已 经 编译 好 的 发 行 版 本 进行 打包 。 由 于 需要 将 传统 的 文本 流 从 
Browserify 管道 传递 到 Gulp， 因 此 还 需要 安装 vtnyL-source-stream: 








$ npm install vinyl-source-stream --save-dev 
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Node 中 的 流 

在 Node 中 ,， 流 (https://nodejs.org/api/stream.html) 是 一 个 抽象 的 接口 ， 可 以 
由 不 同 的 对 象 实现 。 举 例 来 说 ， 对 HTTP 服务 器 的 一 个 请 求 就 是 一 个 流 ， 如 
stdout 就 是 一 个 流 。 流 是 可 读 、 可 写 , 或 者 同时 可 读 写 的 。 所 有 的 流 都 是 
EventEmitter 的 实例 。 











接 下 来 要 为 Browserify 提供 一 些 指令 ， 以 便 需 要 时 用 它 打 包 客 户 端 专用 的 实现 。 在 
package.json 文件 中 添加 browser 属性 ， 如 下 所 示 : 
{ 
"browser": { 
"./src/index.js": "./src/index.client.js" 


} 
} 


当 遇 到 特定 文件 ./src/index.js 时 ，Browserify 应 该 知道 要 打包 一 个 不 同 的 文件 .src/index. 
clientjs， 这 个 文件 中 包含 了 客户 端 版 本 的 实现 。 这 种 做 法 乍 听 起 来 有 些 奇怪 ， 因 为 我 们 本 
来 要 编写 的 代码 就 是 假定 可 以 同时 在 客户 端 和 服务 器 端 运行 的 ， 但 某 些 时 候 我 们 确实 不 能 
这 样 做 (比如 不 能 在 客户 端 运行 hapi 服务 器 )。 关 键 是 要 限制 并 隔离 这 些 不 经 常 改变 的 代 
码 补丁 ， 从 而 让 日 常 开发 不 会 因 环境 上 下 文 切换 而 受到 巨大 影响 。 

















最 后 一 步 是 修改 gulpfilejjs 文件 。 首 先 需 要 导入 新 安装 的 模块 。 





var browserify = require('browserify'); 
var source = require('vinyl-source-stream'); 


然后 创建 新 的 bundle 打包 任务 。 


gulp.task('bundle', function () { 
var b = browserify({ 
entries: 'src/index.js', 
debug: true 


}) 
.transform('babelify', { presets: ['es2015'] }); 


return b.bundle() 
.pipe(source('build/application.js')) 
.pipe(gulp.dest('dist')); 
]); 


这 项 任务 会 通过 browserify 运行 ./src/index.client.js 文件 ， 并 追踪 所 有 发 现 的 依赖 。 任 务 会 
创建 一 个 单独 的 文件 ， 并 写 入 到 ./dist/build/application.js 中 。 接 下 来 ， 将 bundle 任务 添加 
到 默认 任务 中 。 

gulp.task('default', function (callback) { 


sequence(['compile', 'watch', 'copy', 'bundle'], 'start', callback); 


}); 
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最 后 ， 需 要 修改 watch 任务 ， 以 便 修改 源 代码 后 可 以 自动 重新 打包 。 


gulp.task('watch', function () { 
gulp.watch('src/**/*.js', ['compile', 'bundle']) 
gulp.watch('src/**/*.html', ['copy']); 

]); 


就 是 这 样 ! 现在 我 们 已 经 准备 好 创建 打包 文件 了 ， 不 过 需要 按照 之 前 在 package.json 文件 
中 指定 的 那样 ， 先 添加 客户 端的 实现 。 











8.1.3 添加 客户 端 实现 

在 应 用 的 入 口 点 ./src/index.js 文件 中 ， 我 们 实例 化 了 一 个 hapi 服务 器 。 这 仅仅 是 一 种 用 于 
特定 环境 的 代码 ， 我 们 需要 确保 其 不 会 在 客户 端 中 运行 。 在 上 一 节 中 ， 我 们 已 经 看 到 了 如 
何在 package.json 文件 中 通过 browser 属性 为 客户 端 和 服务 器 端 指定 不 同 的 实现 ， 也 定义 
了 用 于 替换 ./src/index.js 的 文件 ./src/index.client.js。 我 们 的 第 一 个 目标 是 简单 地 将 “hello 
browser” 打 印 到 浏览 器 控制 台中 。 


























console.log('hello browser'); 
现在 需要 在 应 用 模板 ./src/index.html 文件 中 引入 这 个 文件 的 链接 地 址 ， 如 例 8-1 所 示 。 
例 8-1 在 页 面 模板 中 引入 应 用 打包 文件 


<html> 
<head> 
<meta charset="utf-8"> 
<title> 
And the man in the suit has just bought a new car 
From the profit he's made on your dreams 
</title> 
</head> 
<body> 
{{body}} 
</body> 
<script type="text/javascript" src={{application}}></script> 
</html> 





在 ./src/index.js 文件 中 将 应 用 打包 文件 的 路 径 作 为 属性 值 ， 并 通过 泻 染 上 下 文 进行 参数 传 
递 ， 如 例 8-2 所 示 。 


例 8-2 在 模板 浑 染 上 下 文中 添加 打包 路 径 
const APP_FILE_PATH = '"/appLication.js'; 
const application = new Application({ 
'/hello/{name*}': HelloController 
},{ 
server: server, 
document: function (application, controller, request, reply, body, callback) { 
nunjucks.render('./index.html', { 
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body: body, 
application: APP_FILE_PATH 
}, (err, html) => { 
if (err) { 
return callback(err, null); 


了 
callback(null, html); 
于 


最 后 ， 在 服务 器 代码 ./src/index.js 中 添加 一 条 路 由 来 提供 打包 文件 。 


server.route({ 
method: 'GET', 
path: APP_FILE_PATH, 
handler: (request, reply) => { 
reply.file('dist/build/application.js'); 


}); 





现在 ， 在 终端 执行 Gulp 默认 任务 并 在 浏览 器 中 打开 http://localhost:8000/， 应 该 能 看 到 和 以 
往 一 样 的 结果 。 但 如 果 打 开 浏 览 器 控制 台 ， 应 该 能 看 到 “hello browser” 字 样 的 提示 信息 。 
如 果 你 能 看 见 这 条 信息 ， 那 么 恭喜 你 一 一 你 提供 了 第 一 个 应 用 包 ! 虽然 这 个 示例 很 简单 ， 
但 理解 其 设置 步骤 将 有 助 于 实现 接 下 来 的 同 构 工 作 。 


8.2 ”响应 用 户 请 : 


在 上 一 章 中 ， 我 们 将 URL 作为 让 用 户 向 应 用 发 出 请 求 的 一 种 机 制 。 以 这 个 Web 基石 作为 
切入 点 ， 我 们 在 服务 器 上 建立 了 应 用 框架 。 我 们 接收 传人 的 请 求 ， 并 将 请 求 映射 到 执行 控 
制 器 操作 的 路 由 处 理 器 中 。 这 种 做 法 用 于 构造 客户 端 请 求 的 响应 。 这 个 请 求 / 响 应 的 生命 
周期 构成 了 应 用 框架 的 核心 ， 而 我 们 必须 确保 客户 端 也 能 够 支持 这 种 生命 周期 的 协议 ， 以 
便 应 用 代码 可 以 通过 可 预测 的 方式 执行 。 












































协议 的 第 一 部 分 是 需要 响应 用 户 发 起 的 请 求 ( 即 URL)。 这 在 服务 器 端 是 一 个 HTTP 的 
request 对 象 。 客 户 端 中 没有 这 个 对 象 ， 但 我 们 还 是 希望 应 用 代码 能 够 在 客户 端 执行 ， 以 
便利 用 SPA 模型 带 来 的 性 能 优势 。 在 客户 端 中 ， 我 们 可 能 会 响应 用 户 点 击 的 一 个 链接 ， 并 
随 之 更 新 浏览 器 地 址 栏 中 的 URL。 正 是 因为 URL 发 生 了 变化 ， 所 以 必须 在 客户 端 中 进行 
响应 ， 正 如 在 服务 器 端 响应 HTTP 请 求 一 样 。 为 了 在 客户 端 执行 请 求 /响应 生命 周期 ， 我 
们 的 基本 思路 是 支持 点 击 操作 ， 这 些 操 作 本 来 会 正常 地 改变 URL， 并 发 起 一 个 HTTP 请 
求 以 获取 HTML 文档 ， 导 致 页 面 重新 加 载 。 此 外 ， 我 们 还 希望 能 够 确保 浏览 器 历史 正常 
保留 ， 以 便 在 浏览 器 中 执行 的 前 进 或 者 后 退 操 作 能 够 如 常 进行 。 好 在 可 以 利用 现 有 的 原生 
接口 History API (https://developer.mozilla.org/en-US/docs/Web/API/History) 来 实现 这 些 内 
合 。 




















8.2.1 利用 History API 


在 History API 出 现 之 前 ，SPA 在 客户 端 中 使 用 # 号 片段 (https:/en.wikipedia.ore/wiki/Fragment _ 
identifier) 作为 “页 面 ” 路 由 的 一 种 解决 方案 。 当 # 号 片段 发 生变 化 时 ， 会 在 浏览 器 历史 中 增 
添 新 的 记录 ， 而 页 面 不 会 刷新 ， 但 这 种 方式 不 支持 SEO， 因 为 # 号 片段 不 会 作为 HTTP 请 求 
的 一 部 分 被 发 送 到 服务 器 端 。 这 是 因为 # 号 片段 的 设计 目的 仅仅 是 链接 到 文档 中 的 某 一 部 分 。 
然而 ，History API 诞生 的 目的 就 是 为 了 确保 URL 依然 可 以 达到 预期 的 目的 ， 即 在 SPA 和 被 搜 
索引 擎 正确 索引 的 那些 内 容 中 识别 唯一 的 资源 。 


History API 非常 简单 。 它 提供 了 一 个 history 栈 ， 你 可 以 将 状态 对 象 、 标 题 和 URL 添加 到 


这 个 栈 中 。 对 我 们 而 言 ， 在 路 由 表 将 URL 映射 到 路 由 中 时 ， 我 们 只 需要 关心 其 中 的 两 个 
方法 和 一 个 事件 。 

































































History.replaceState 
这 个 方法 会 修改 history 栈 中 最 新 的 一 项 历史 ， 可 以 用 于 向 一 个 服务 器 端 演 染 的 页 面 中 
添加 状态 对 象 。 














History.pushState 
这 个 方法 会 向 history 栈 中 添加 一 个 状态 对 象 、 标 题 (可 选 ) 和 URL (可 选 )。 这 个 方法 
可 以 帮助 我 们 存储 URL 状态 ， 并 提高 客户 端 跳 转 的 响应 性 。 比 如 ， 泻 染 页 面 所 需 的 所 
有 数据 都 可 以 存储 在 这 个 状态 对 象 中 ， 这 样 一 来 ， 当 用 户 跳 转 到 之 前 泻 染 过 的 页 面 时 ， 
就 可 以 对 网 络 请 求 进行 数据 短路 。 



































PopStateEvent 
当前 活动 历史 项 发 生 改变 时 会 触发 PopStateEvent， 比 如 当 用 户 点 击 浏 览 器 的 后 退 按钮 
时 。 监 听 该 事件 可 以 用 于 触发 客户 端的 路 由 跳 转 。 


这 些 方法 和 事件 可 以 在 客户 端 为 每 一 个 通过 URL 标识 的 唯一 资源 触发 路 由 请 求 ， 就 像 在 
服务 器 端 使 用 的 HTTP GET 请 求 那样 。 











8.2.2 ”响应 并 调用 History API 

在 本 节 中 ， 我 们 会 将 History API 整合 到 应 用 的 核心 代码 当中 ， 以 实现 客户 端 路 由 。 在 开始 
之 前 需要 提醒 你 的 是 ， 我 们 将 在 本 节 中 创建 第 一 个 真正 的 抽象 。 通 常 我 会 极力 避免 进行 抽 
象 ， 因 为 这 会 隐藏 细节 ， 从 而 混淆 代码 含义， 让 代码 更 加 难以 跟踪 ， 结 构 变 得 脆弱 。 正 如 
James Coplien 所 说 ,“ 抽 象 是 魔鬼 "。 不 过 ， 抽 象 有 时 确实 是 必需 的 ， 这 个 示例 就 恰好 属于 
这 种 情况 ， 因 为 我 们 不 可 能 在 客户 端 运行 一 个 服务 器 。 




















在 8.1.3 节 中 ， 我 们 创建 了 一 个 客户 端 打 包 文 件 ， 该 文件 在 日 志 中 记录 了 “hello browser 。 
这 个 打包 文件 的 入 口 点 是 ./src/index.js 文件 ， 随 后 ， 我 们 在 package.json 中 将 入 口 点 指向 了 
客户 端 实现 的 版 本 ， 即 ./src/index.clientjs， 而 ./src/index.js 文件 则 成 为 了 服务 器 端的 入 口 点 。 
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这 个 服务 器 端的 入 口 点 导入 了 应 用 的 核心 代码 ， 即 /src/lib/index.js， 并 启动 了 应 用 。 我 们 需 
要 在 客户 端 实现 中 遵循 相同 的 形式 ， 如 例 8-3 所 示 。 


例 8-3 客户 端 打包 入 口 点 


import Application from './lib'; 
import HelloController from './HelloController'; 





const application = new Application({ 
'/hello/{name*}': HelloController 
};: £ 
// target 参 数 设置 控制 器 响应 的 内 容 应 该 插入 到 哪个 元 素 中 
// 值 为 元 素 的 查找 选择 器 (query selector) 
target: "body' 
]); 





application.start(); 

目前 我 们 将 关注 点 放 在 History API 本 身 ， 和 暂时 不 考虑 代码 重用 的 问题 。 在 完 
成 客户 端 实现 的 最 初版 本 之 后 ， 我 们 再 考虑 重用 的 问题 。 此 外 ， 我 们 在 这 一 
节 中 会 跳 过 路 由 定义 ， 并 将 在 8.3 节 中 进行 探讨 。 

















接 下 来 需要 实现 客户 端的 Application 类 ， 并 在 其 中 封装 History API 的 代码 。 但 是 ， 首 先 
需要 在 package.json 的 browser 属性 中 添加 一 个 新 的 字段 。 




















{ 
"browser": { 
"./src/index.js": "./src/index.client.js", 
"./src/lib/index.js": "./src/lib/index.client.js" 
} 
} 


这 是 为 了 通知 Browserify 在 打包 时 使 用 ./src/lib/index.client.js 文件 。 现 在 我 们 可 以 开始 
在 ./src/lib/index.client.js 文件 中 实现 Application 类 ， 如 例 8-4 所 示 。 


例 8-4 Application 类 的 待 实 现 函 数 
export default class Application { 


navigate(url, push=true) { 
} 
start() { 
} 
} 


我 们 在 本 节 中 将 以 这 种 形式 进行 编码 ， 从 实现 start 方法 开始 。 首 先 需 要 为 History. 
pushstate 添加 一 个 事件 监听 器 (如 例 8-5 所 示 ) 。 
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例 8-5 Application 类 的 navigate 和 start 方法 


navigate(url, push=true) { 
console. log(url); 


} 


start() { 
// 创建 popstate 事 件 监听 
this.popStateListener = window.addEventListener('popstate', (e) => { 
let { pathname, search} = window.Location; 
let url = ‘“${pathname}${search}'; 
this.navigate(url, false); 
}); 
} 











目前 来 看 ， 这 个 事件 监听 器 只 是 简单 地 将 当前 的 URL 打印 出 来 ， 让 我 们 能 够 确认 它 是 正常 工 
作 的 。 在 8.3 节 中 ， 我 们 会 将 它 和 客户 端 路 由 联系 起 来 ， 执 行 一 个 匹配 URL 的 路 由 处 理 器 。 


接 下 来 ， 需 要 实现 一 个 选择 性 加 入 的 点 击 事件 处 理 器 。 当 用 户 点 击 一 个 带 有 href 属性 的 标 
签 或 者 某 些 选择 性 加 入 的 提供 所 需 数据 的 元 素 时 ， 这 个 处 理 器 可 以 用 来 执行 路 由 处 理 器 。 
这 种 选择 应 该 是 声明 式 的 和 不 显眼 的 ， 以 便 应 用 框架 可 以 轻松 地 进行 事件 监听 ， 而 不 会 影 
响 到 应 用 的 其 他 部 分 。 要 实现 这 一 目的 ， 使 用 data-* 属性 (https://developer.mozilla.org/ 
en-US/docs/Web/HTML/Global_attributes/data-*) 是 一 个 不 错 的 方法 。 我 们 可 以 使 用 这 个 接 
口 来 定义 自己 的 data-* 属性 ， 并 利用 这 个 属性 来 检测 应 在 应 用 框架 中 处 理 的 点 击 事件 〈 如 
列 8-6 所 示 )。 






























































EIT 








例 8-6 Application 类 的 start 方法 中 的 事件 监听 器 
start() { 
// 创建 popstate 事 件 监听 器 
this.popStateListener = window.addEventListener('popstate', (e) => { 
// 出 于 简洁 的 目的 ,省 略 函 数 体 代 码 
]); 

















// 如 果 符 合 执行 条 件 ,就 创建 点 击 事件 监听 器 ,并 将 跳 转 的 工作 转交 给 navigate 方 法 
this.clickListener = document.addEventListener('click', (e) => { 

let { target } = e; 

let identifier = target.dataset.navigate; 

let href = target.getAttribute('href'); 




















if (identifier !== undefined) { 
// 用 户 点 击 链接 时 ,需要 避免 浏览 器 默认 行为 ( 即 加载 一 个 新 的 HTML 文 档 
if (href) { 
e.preventDefault(); 


} 





— 

















// 如 果 identifier 存 在 , 则 使 用 identifier 进 行 跳 转 , 否则 使 用 href 


this.navigate(identifier || href); 

















}); 
} 
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上 述 代 码 在 document 对 象 中 放置 了 一 个 事件 监听 器 ， 并 根据 自 定 义 数据 属性 data-navigate 
进行 和 选 。 如 果 符 合 执行 条 件 ， 那 么 就 调用 一 个 被 称 为 navigate 的 新 方法 (尚未 实现 )。 接 
下 来 ， 我 们 来 实现 点 击 事件 处 理 器 引用 到 的 这 个 navigate 方法 (如 例 8-7 所 示 )。 





























例 8-7 Application 类 的 navigate 和 history.pushSstate 方法 


navigate(url, push=true) { 
// 如 果 浏 览 器 不 支持 History API, 则 直接 设置 location 属 性 并 返回 
if (!history.pushState) { 
window.Location = url; 
return; 


} 











console. log(url); 








// 只 有 在 push 参 数 为 true 时 才 添 加 到 history 栈 中 
if (push) { 
history.pushState({}, null, url); 
} 
} 
个 navigate 方法 是 用 于 为 匹配 路 由 表 的 URL 执行 路 由 处 理 器 的 另 一 个 占 位 方法 。 目 前 
0 个 空 的 状态 对 象 和 一 个 URL 添加 到 history 栈 即 可 ， 以 确保 这 个 方法 可 以 正常 


工作 。 


现在 已 经 实现 了 桩 函数 中 的 内 容 ， 还 需要 修改 /{name*} 路 由 对 应 的 模板 ， 将 一 些 链接 放 
进 其 中 来 测试 新 方法 。 目 前 的 模板 被 硬 编码 在 HeLLoControtLter 类 中 ， 以 字符 串 形式 存在 
(在 ./src/hello-controllerjs 中 定义 )， 因 为 这 个 模板 很 简单 ， 所 以 我 们 可 以 避免 读 取 文件 系 
统 的 开销 。 然 而 ， 既 然 已 经 打算 扩展 模板 ， 现 在 似乎 就 是 将 模板 移动 到 一 个 单独 文件 的 好 
时 机 ， 将 模板 放 在 ./src/hello.html 文件 中 (如 例 8-8 所 示 )。 




















例 8-8 ”HelloController 类 的 模板 


<p>hello {{fname}} {{lname}}</p> 
<UL> 
<li><a href="/mortimer/smith" data-navigate>Mortimer Smith</a></li> 
<li><a href="/bird/person" data-navigate>Bird Person</a></li> 
<li><a href="/revolio/clockberg" data-navigate>Revolio Clockberg</a></li> 
</ul> 


后 需要 修改 Hetllocontroller 类 (如 例 7-7 所 示 )， 让 其 从 文件 系统 中 读 取 模 板 ， 如 例 
8-9 所 示 。 


例 8-9 HelloController 类 的 tostring 方法 
toString(caLLback) { 


nunjucks.render('hello.html', getName(this.context), (err, html) => { 
if (err) { 
return callback(err, null); 





callback(null, html); 
]); 
} 
如 果 在 终端 中 执行 gutp， 并 在 浏览 器 中 打开 http://localhost:8000/hello/{fname}/{lIname}， 那 
么 你 应 该 可 以 看 到 带 有 链接 的 新 页 面 。 当 点 击 链接 时 ， 你 应 该 可 以 看 到 训 览 器 地 址 栏 发 生 
了 变化 ， 并 且 在 控制 台中 打印 出 了 日 志 语句 。 当 使 用 浏览 器 的 前 进 和 后 退 功能 时 ， 也 应 访 
能 够 看 到 相同 的 行为 。 现 在 我 们 已 经 挂 钧 (hook) 到 了 浏览 器 历史 当中 | 





























从 表面 上 看 ， 利 用 History API 的 这 些 待 实现 函数 显得 微不足道 ， 但 它们 将 会 成 为 应 用 的 资 
源 请 求 接口 ， 就 像 在 服务 器 端 进行 的 HTTP GET 请 求 那样 。URL 正 是 服务 器 端 和 客户 端 实 
现 的 共同 因素 。URL 就 像 函 数 的 签名 那样 ， 用 于 在 路 由 表 中 匹配 路 由 。 在 服务 器 端 ， 路 由 
表 是 hapi 的 一 部 分 。 虽 然 我 们 不 能 在 客户 端 中 运行 hapi， 但 我 们 应 该 使 用 相同 的 路 由 规则 ， 
以 便 路 由 可 以 通过 同一 种 算法 来 匹配 和 运用 。 在 下 一 节 中 ， 我 们 将 探讨 如 何 实现 这 一 点 。 


8.3 客户 端 路 由 

在 上 一 节 中 ， 当 点 击 链接 或 者 通过 浏览 器 历史 进行 前 进 或 者 后 退 的 跳 转 时 ， 你 可 能 已 经 广 
意 到 ， 屏 幕 上 的 欢迎 信息 没有 随 着 路 径 参 数 的 改变 而 发 生变 化 。 这 是 因为 我 们 没有 执行 控 
制 器 操作 并 泻 染 响应 。 为 了 做 到 这 一 点 ， 我 们 需要 一 个 客户 端 路 由 器 ， 这 个 路 由 器 使 用 的 
路 由 匹配 算法 与 hapi 一 致 。 好 在 hapi 将 其 HTTP 路 由 器 模块 化 了 ， 并 称 之 为 call (https:// 
www.npmjs.com/package/call) ， 而 且 由 于 Browserify 本 身 就 是 设计 用 于 在 客户 端 运行 Node 
模块 的 ， 因 此 我 们 正好 可 以 利用 这 个 模块 | 但 首先 需要 安装 它 。 























$ npm install call --save 


接 下 来 需要 将 call 模块 导入 到 应 用 框架 的 客户 端 源 代码 ./src/lib/index.client.js 中 ， 并 编写 
constructor 和 registerRoutes 方法 的 客户 端 实现 ， 如 例 8-10 所 示 。 








例 8-10 在 Application 类 中 使 用 HTTP 路 由 器 call 


import Call from 'call'; 
export default class Application { 


constructor(routes, options) { 
// 为 控制 器 保存 路 由 为 查找 表 
this.routes = routes; 
this.options = options; 
// 创建 一 个 call 的 路 由 器 实例 
this.router = new Call.Router(); 
this.registerRoutes(routes); 


} 





registerRoutes(routes) { 
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// 遍历 传 入 的 路 由 ,并 将 这 些 路 由 添加 到 call 的 路 由 器 实例 中 
for (let path in routes) { 
this.router .add({ 


path: path, 
method: 'get' 
]); 
} 
} 


navigate(url, push=true) { 
// 出 于 简洁 的 目的 ,省 略 函 数 体 代码 
} 























start() { 
// 出 于 简洁 的 目的 ,省 略 函数 体 代 码 
} 























} 


在 constructor 和 registerRoutes 方法 中 ， 我 们 使 用 了 call 模块 来 创建 路 由 器 ， 并 用 来 
注册 应 用 路 由 。 这 些 路 由 定义 会 由 navigate 方法 使 用 ， 通 过 在 constructor 方法 中 设置 的 
this.routes 属性 将 URL 匹配 到 控制 器 (如 例 8-11 所 示 ) 。 








例 8-11 在 Application 类 的 navigate 方法 中 匹配 路 由 
navigate(url, push=true) { 
// 如 果 浏 览 器 不 支持 Hstory API, 则 直接 设置 location 属 性 并 返回 
if (!history.pushState) { 
window.Location = url; 
return; 


} 


// 分 割 路 径 并 搜索 字符 串 
Let UrLParts = url.split('?'); 
// 解构 urLParts 数 组 
Let [path，search] = UrLParts; 
// 判断 URL 路 径 是 否 匹 配 路 由 器 中 的 路 由 
Let match = this.router.route('get', path); 
// 解构 路 由 的 路 径 和 参数 
Let { route, params } = match; 
// 在 路 由 表 中 查找 Controller 类 
Let Controller = this.routes[route]; 
// 如 果 路 由 匹配 ,并 且 路 由 表 中 存在 Controller 类 , 则 创建 一 个 控制 器 实例 
if (route && Controller) { 
console.log(match) 
console.log(Controller); 















































console.log(url); 


// 如 果 push 参 数 为 true, 则 添加 到 history 栈 中 
if (push) { 
history.pushState({}, null, url); 








执行 客户 端 响应 流 


将 URL 匹配 到 控制 器 中 后 ， 接 下 来 就 可 以 执行 与 服务 器 端 相 同 的 响应 流 了 。 





(D) 创建 控制 器 实例 。 
(2) 执行 控制 器 操作 。 
(3) 泻 染 响应 。 


1. 创建 控制 器 实例 

在 创建 控制 器 实例 时 ， 需 要 传递 一 个 context 对 象 ， 其 中 包含 了 路 径 参 数 和 查询 参数 。 在 
服务 器 端 ， 这 些 值 是 从 request 对 象 中 提取 出 来 的 ， 但 我 们 不 能 在 客户 端 使 用 这 个 对 象 。 
在 下 一 章 中 ， 我 们 将 介绍 如 何 为 request 和 reply 对 象 创建 轻 量 级 的 封装 ， 其 中 包含 了 路 
径 参 数 和 查询 参数 的 抽象 。 但 目前 先 来 编写 Application 类 的 navigate 方法 的 代码 。 









































navigate(url, push=true) { 


// 出 于 简洁 的 目的 ,省 略 先前 的 代码 





if (route && Controller) { 
const controller = new Controller({ 
query: search, 
params: params 


6 
} 





// 出 于 简洁 的 目的 ,省 略 后 续 的 代码 





现在 我 们 已 经 具备 在 客户 端 创建 控制 器 实例 的 能 力 了 ， 正 如 我 们 在 服务 器 端 所 做 的 那样 。 
然而 ， 你 可 能 已 经 发 现代 码 中 存在 的 一 个 问题 了 。 如 果 没 有 的 话 ， 请 再 看 一 下 我 们 是 如 何 
填充 context 对 象 的 query 属性 的 。 这 个 值 是 字符 串 ， 而 非 经 过 解码 的 对 象 ， 所 以 我 们 需 
要 将 从 urlParts 解构 出 来 的 search 值 解析 为 一 个 对 象 。 可 能 和 我 一 样 ， 你 在 这 些 年 间 已 
经 无 数 次 实现 过 这 个 功能 ， 却 从 没有 将 这 个 功能 封装 起 来 。 好 在 其 他 人 的 代码 组 织 得 比 我 
更 好 ， 为 实现 这 一 目的 ， 我 们 可 以 从 npn 安装 一 个 模块 。 






























































$ npm install query-string --save 


可 以 导入 这 个 模块 ， 并 使 用 它 来 解析 search 字符 串 。 





navigate(url, push=true) { 


// 出 于 简洁 的 目的 ,省 略 先前 的 代码 





if (route && Controller) { 
const controller = new Controller({ 
// 将 search 字 符 串 解析 为 对 象 
query: query.parse(search), 
params: params 
} 
} 
} 
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现在 ， 客 户 端 路 由 响应 实现 可 以 在 创建 控制 器 时 传递 我 们 希望 的 参数 了 ， 因 此 控制 器 就 
不 能 分 辨 出 它 是 在 客户 端 还 是 在 服务 器 端 创建 的 。 非 常 棒 ! 我 们 成 功 地 创建 了 第 一 个 封 
装 ! 需要 再 次 提醒 的 是 ， 保 持 最 小 化 的 抽象 是 非常 重要 的 。 在 这 个 示例 中 ， 我 们 之 所 以 
在 应 用 框架 的 代码 中 进行 抽象 ， 只 是 因为 这 部 分 代码 不 会 频 或 发 生 改动 ， 这 和 应 用 代码 




















是 有 区 别 的 。 
2. 执行 控制 器 操作 


要 想 在 我 们 创建 的 控制 器 实例 上 执行 控制 器 操作 ， 其 方法 和 服务 器 端 基本 相同 ， 如 例 8-12 
所 示 。 唯 一 的 区 别 是 ， 需 要 为 request 和 reply 参数 传递 桩 函数 。 我 们 将 在 下 一 章 中 创建 


这 些 封装 。 
例 8-12 在 Application 类 的 navigate 方法 中 执行 控制 器 操作 


navigate(url, push=true) { 


// 出 于 简洁 的 目的 ,省 略 先前 的 代码 








if (route && Controller) { 
const controller = new Controller({ 
// 将 search 字 符 串 解析 为 对 象 
query: query.parse(search), 
params: params 


}); 


// request 和 reply 的 桩 函数 ;下 一 章 将 实现 其 封装 
const request = () => {}; 
const reply = () => {}; 
// 执行 控制 器 操作 
controller.index(this, request, reply, (err) => { 
if (err) { 
return reply(err); 








}); 
} 
} 


3. 泻 染 控 制 器 响应 
在 客户 端 为 ./src/lib/Controller.js 文件 中 的 tostring 方法 实现 另外 一 种 泻 染 方 式 。 


render(target, callback) { 
this.toString(function (err, body) { 
if (err) { 
return callback(err, null); 


} 


document.querySelector(target).innerHTML = body; 
callback(null, body); 
]); 





这 种 方式 可 以 让 我 们 充分 利用 为 客户 端 优化 的 各 种 谊 染 了 模式 ， 比如 Reactjs 的 虚拟 DOM 
(https://facebook.github.io/react/docs/refs-and-the-dom.html) ， 这 与 使 用 字符 串 连 接 的 模板 库 
相对 应 。 





如 果 在 终端 运行 Gulp 默认 任务 ， 然 后 在 浏览 器 中 打开 http://localhost:8000/hello/{fname}/ 
{lIname}， 并 通过 链接 进行 跳 转 ， 你 应 该 能 够 看 到 页 面 变 化 ， 但 结果 并 不 符合 我 们 的 预期 。 
欢迎 信息 的 内 容 一 直 是 “hello hello.html Sanchez”。 这 是 因为 我 们 还 没有 针对 客户 端 配置 
Nunjucks， 也 没有 在 服务 器 端 添 加 处 理 器 来 处 理 模 板 文件 的 请 求 ， 现 在 每 次 请 求 都 会 返 
回 ./src/index.html 的 内 容 ， 而 且 控 制 器 将 路 径 参 数 index.html 当成 了 fname。 我 们 来 修复 这 
个 问题 。 在 .src/index.client.js 文件 中 (如 例 8-13 所 示 ) 配置 Nunjucks， 以 便 其 可 以 在 浏览 
器 端 从 绝对 路 径 /templates 中 读 取 内 容 。 




















例 8-13 为 客户 端 配 置 Nunjucks 


import Application from './lib'; 
import HelloController from './hello-controller'; 
import nunjucks from 'nunjucks ' ; 


// 配置 Nunjucks 以 便 从 dist 目 录 中 读 取 内 容 


nunjucks.configure('/tempLates ' ) ; 





const application = new Application({ 
'/hello/{name*}': HelloController 
et 
// target 参 数 设置 控制 器 响应 的 内 容 应 该 插入 到 哪个 元 素 中 
// 值 为 元 素 的 查找 选择 器 
target: 'body' 
1 











application.start(); 


现在 Nunjucks 会 对 /templates/{template_file_name} 这 个 地 址 发 起 Ajax 请 求 。 接 下 来 需要 
在 ./src/index.js 文件 中 向 服务 器 端 添 加 一 个 处 理 器 ， 以 响应 合适 的 模板 内 容 ， 如 例 8-14 
所 示 。 


例 8-14 为 模板 文件 定义 路 由 处 理 器 
import Hapi from 'hapi'; 
import Application from './lib'; 
import HelloController from './hello-controller'; 
import nunjucks from 'nunjucks ' ; 
import path from 'path'; 








// 出 于 简洁 的 目的 ,省 略 中 间 代 码 











server .route({ 
method: 'GET', 
path: '/templates/{template*}', 
handler: { 
file: (request) => { 
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return path.join('dist', request.params.template); 


// 出 于 简洁 的 目的 ,省 略 后 续 的 代码 


现在 ， 如 果 回 到 浏览 嚣 中 并 通过 链接 进行 跳 转 ， 应 该 能 够 看 到 名 称 发 生 了 对 应 的 改变 ， 这 
是 因为 我 们 按照 图 8-1 所 示 的 方式 泻 染 了 控制 右 响 应 。 成 功 了 ! 现在 我 们 已 经 建立 好 了 同 
构 JavaScript 应 用 的 基础 ! 然而 ， 还 有 一 些小 问题 留待 处 理 ， 我 们 将 在 下 一 方 中 处 理 这 些 
问题 。 































































































Previous 


<controller> 
.detach 


<controller> 
.attach 














8-1: 响应 href 点 击 事件 
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在 某 些 情况 下 ， 你 可 能 想 要 为 客户 端 预 编译 模板 ， 有 时 候 在 服务 器 端 
样 如 此 。 





8.4 组 织 代 码 





在 这 个 示例 中 ， 我 们 每 次 都 会 为 模板 进行 Ajax 请 求 ， 而 且 没 有 缓存 内 容 。 
这 种 做 法 虽然 效率 不 高 ， 但 操作 简单 ， 延 迟 了 加 载 ， 更 适用 于 开发 环境 。 


骨 也 , 同 


现在 已 经 完成 了 本 章 目标 : 将 框架 和 应 用 代码 传输 到 客户 端 。 虽 然 目 前 一 切 正常 ， 但 应 用 
中 存在 一 些 重复 的 代码 ， 比 如 在 ./src/index.js 和 ./src/index.client.js 文件 中 。 这 两 个 文件 中 
都 出 现 了 包括 路 由 定义 的 应 用 实例 化 和 初始 化 的 代码 。 这 种 重复 定义 路 由 的 方式 不 太 理 











想 ， 因 为 当 想 要 添加 、 删 除 或 者 修改 路 由 时 ， 我 们 必须 在 两 个 不 同 的 地 方 作 昌 
外 ， 我 们 将 应 用 代码 和 环境 相关 的 实现 细节 混在 了 一 起 。 随 着 应 用 规模 的 增长 ， 











将 会 变 得 不 同步 且 难 以 维护 。 通 过 将 环境 的 细 广 移 到 不 同 的 选项 文件 中 ， 可 以 提 











可 维护 性 ， 以 便 ./src/index.js 文件 更 容易 阅读 ， 并 成 为 客户 端 和 服务 器 端的 共 





修改 。 此 
这 些 文件 
高 代码 的 
同 入 口 点 。 


我 们 从 服务 器 端的 选项 文件 ./src/options.js 开始 创建 ， 并 将 特定 的 环境 细 市 移 到 这 个 新 的 文 


件 中 (如 例 8-15 所 示 )。 
例 8-15 用 于 服务 器 端的 应 用 选项 


import Hapi from 'hapi'; 
import path from 'path'; 
import nunjucks from 'nunjucks ' ; 


const server = new Hapi.Server({ 
debug: { 
request: ['error'] 


]); 

server .Connection({ 
host: "LocaLhost ' ， 
port: 8000 

]); 


const APP_FILE_PATH = '/application.js'; 
server.route({ 
method: 'GET', 
path: APP_FILE_PATH， 
handler: (request, reply) => { 
reply.file('dist/build/application.js'); 
} 
]); 


server .route({ 
method: 'GET', 
path: '/templates/{template*}', 
handler: { 
file: (request) => { 
return path.join('dist', request.params.template); 
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}); 


export default { 
nunjucks: './dist', 
server: server, 
document: function (application, controller, request, reply, body, callback) { 
nunjucks.render('./index.html', { 
body: body, 
application: APP_FILE_PATH 
}, (err, html) => { 
if (err) { 
return callback(err, null); 
} 
callback(null, html); 
]); 
} 
}; 





同 理 ， 我 们 还 需要 创建 客户 端的 选项 文件 ./src/options.client.js (如 例 8-16 所 示 )。 
例 8-16 用 于 客户 端的 应 用 选项 


export default { 
target: 'body', 
nunjucks: '/templates' 


5 


现在 需要 修改 package.json 文件 中 的 属性 ， 以 体现 这 些 变 化 。 


{ 
"browser": { 
"./src/lib/index.js": "./src/lib/index.client.js", 
"./src/options.js": "./src/options.client.js" 
} 
} 


最 后 ， 需 要 修改 ./src/index.js 文件 来 引入 这 些 新 的 配置 模块 ， 如 例 8-17 所 示 。 





例 8-17 统一 的 应 用 入 口 点 
import Application from './lib'; 
import HelloController from './HelloController'; 
import nunjucks from 'nunjucks'; 
import options from './options'; 


nunjucks .configure(options.nunjucks); 
const application = new Application({ 
'/hello/{name*}': HelloController 


}, options); 


application.start(); 





随 着 时 间 的 推移 和 应 用 规模 的 增长 ， 这 些小 变化 应 该 能 够 帮助 我 们 大 大 降低 应 用 的 开发 与 
维护 成 本 。 


8.5 小结 


在 本 章 中 ， 我 们 将 框架 和 应 用 代码 从 服务 器 端 转移 到 了 客户 端 ， 让 其 成 为 了 同 构 代 码 的 基 
础 。 我 们 熟悉 了 常用 的 构建 模式 ， 在 浏览 器 端 沿 用 了 服务 器 端的 生命 周期 ， 并 利用 History 
API 来 响应 URL 的 变化 。 下 一 章 将 在 目前 的 基础 之 上 继续 进行 构建 ， 为 同 构 应 用 的 一 些 常 
用 特性 创建 轻 量 级 的 封装 。 


























整 的 代码 示例 
通过 在 终端 中 运行 npm install thaumoctopus-mimicus@"0.4.x" 命令 ， 可 以 安 


装 本 章 的 完整 代码 示例 。 
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第 9 章 


创建 常用 的 抽象 





Jason Strimpel 
在 本 章 中 ， 我 们 将 创建 两 种 经 常用 于 同 构 JavaScript 应 用 的 抽象 : 


(1) 获取 和 设置 cookie 
(2) 重 定向 请 求 





通过 封装 特定 环境 的 实现 细节 ， 这 些 抽象 为 客户 端 和 服务 器 端 提供 了 一 致 的 API。 在 第 二 
部 分 中 ， 我 们 一 直 在 强调 抽象 带 来 的 危害 〈 包 括 Coplien 的 观点 “抽象 是 魔鬼 ”)。 尽 管 如 
此 ， 本 章 却 是 专门 介绍 如 何 创建 抽象 的 。 让 我 们 先 来 探讨 一 下 何 时 应 该 抽象 ， 以 及 为 什么 
需要 抽象 。 


9.1 何 时 抽象 ， 为 什么 需要 抽象 


事实 上 ， 抽 象 本 身 并 没有 错 ， 但 抽象 经 常 被 滥用 ， 过 早 地 模糊 了 重要 的 实现 细 市 。 这 些 误 
导 性 的 抽象 通常 源 于 人 们 对 编写 更 加 优雅 的 代码 的 不 懈 追 求 。 举 例 来 说 ， 一 个 用 来 设置 项 
目 脚手架 的 模块 本 身 是 有 用 的 ， 但 如 果 它 对 子 模 块 隐藏 了 一 些 细节 ， 导 致 不 能 被 轻易 地 检 
查 、 扩 展 、 配 置 或 者 修改 ， 那 就 男 当 别 论 了 。 正 是 因为 这 种 滥用 被 视 为 魔鬼 ， 进 而 所 有 的 
抽象 都 受到 了 牵连 而 被 打上 了 魔鬼 的 标签 。 然 而 ， 如 果 能 够 适当 地 利用 抽象 ， 那 么 它 将 成 
为 一 个 宝贵 的 设计 工具 ， 可 以 帮助 我 们 创建 直观 的 界面 。 





























根据 我 的 过 往 经 验 ， 在 环境 差异 的 实现 细节 会 给 用 户 带 来 负担 ， 超 过 了 用 户 应 该 关心 的 范 
围 时 ， 我 会 使 用 抽象 来 标准 化 跨 环境 的 API。 或 者 正如 Captain Kirk 所 说 的 那样 ， 我 会 在 
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“多 数 人 的 需求 比 少数 人 (或 者 某 个 人 ) 的 需求 更 重要 ”时 进行 抽象 。 不 过 ， 这 个 指导 原 
则 并 不 是 万 能 的 ， 不 能 仅 赁 它 来 决定 是 否 要 进行 抽象 。 要 想 准 确 知道 何 时 进行 抽象 非常 困 
难 。 通 常 我 会 思考 如 下 因素 。 








。 我 对 这 部 分 代码 是 否 具 有 足够 的 领域 知识 和 经 验 来 作出 这 个 决策 ? 

。 我 作 了 太 多 假设 吗 ? 

。 是 否 存在 比 抽象 更 合适 的 工具 ? 

。 抽象 带 来 的 好 处 是 否 大 于 模糊 带 来 的 成 本 ? 

。 我 是 否 在 合适 的 层次 提供 了 正确 的 抽象 层 ? 

。 抽象 是 否 会 隐藏 底层 对 象 或 函数 的 内 在 本 质 ? 

如 果 对 这 些 问 题 和 类 似 问题 的 回答 能 够 表明 抽象 是 合适 的 解决 方案 ， 那 么 你 可 以 继续 下 去 
了 。 不 过 我 还 是 劝 你 先 和 同事 讨论 一 下 。 我 已 经 数 不 清 有 多 少 次 因为 忽略 了 某 些 关键 的 信 
息 ， 使 得 抽象 并 设 能 成 为 解决 问题 的 最 佳 方案 。 























我 们 已 经 尽 可 能 地 解释 了 何 时 以 及 为 什么 需要 抽象 ， 现 在 开始 创建 抽象 吧 。 


9.2 ”获取 和 设置 cookie 


cookie 是 纯 文 本 值 ， 创 建 的 最 初 目 的 是 为 了 判断 两 个 服务 器 请 求 是 否 来 自 于 同一 个 浏览 器 。 
随后 ，cookie 还 被 用 于 多 种 用 途 ， 其 中 包括 用 于 客户 端的 数据 存储 。 浏 览 器 端 和 服务 器 端 
还 将 cookie 作为 HTTP 头 值 传送 。 这 两 端 都 拥有 获取 和 设置 cookie 的 能 力 。 因 此 ， 对 于 同 
构 JavaScript 应 用 而 言 ， 拥 有 一 致 的 cookie 读 写 能 力 成 为 了 一 种 普遍 的 需求 ， 也 是 我 们 进 
行 抽象 的 首选 。 在 读 写 cookie 上 时， 进行 抽象 的 难点 是 客户 端 和 服务 器 端 之 间 的 接口 差异 很 
大 。 此 外 ， 在 应 用 层面 ， 即 使 对 环境 实现 细节 非常 熟悉 ， 也 不 能 为 简化 cookie 的 读 写 提供 
任何 价值 。 创 建 一 个 封装 对 这 些 细 节 进 行 抽象 ， 并 不 会 减少 开发 者 得 到 的 有 用 信息 ， 就 像 
URL (Web 的 内 部 运作 机 制 ) 对 有 用 信息 的 抽象 不 会 对 用 户 造 成 影响 一 样 。 



































定义 API 

一 个 cookie 由 等 号 分 隔 的 键 值 对 组 成 ， 可 选 属性 由 分 号 隔 开 。 
HTTP/1.0 200 OK 
Content-type: text/html 


Set-Cookie: bnwq=You can't consume much if you sit still and read books; 
Expires=Mon, 20 Apr 2015 16:20:00 GMT 


在 这 个 示例 中 ，HTTP cookie 作为 响应 头 的 一 部 分 被 浏览 器 端 接收 ， 也 可 以 作为 请 求 关 的 
一 部 分 发 送 到 服务 器 端 。 这 种 统一 的 交换 格式 让 客户 端 和 服务 器 端 可 以 实现 接口 以 获取 和 
设置 cookie。 但 是 ， 接 口 在 跨 环境 之 间 并 不 一 致 。 这 是 因为 服务 器 端 不 像 浏览 器 端 那 样 拥 
有 标准 的 接口 。 之 所 以 这 样 设计 ， 是 因为 服务 器 端的 职责 是 多 种 多 样 的 ， 这 和 六 览 器 端 有 
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很 大 的 差别 ， 后 者 本 身 是 设计 为 基于 W3C 标准 的 一 个 运行 平台 ， 用 于 展示 UI。 正 是 因为 
这 些 差异 的 存在 ， 我 们 才 需 要 创建 抽象 。 然 而 ， 在 创建 接口 用 于 跨 客 户 端 和 服务 器 端 获 取 
和 设置 cookie 之 前 ， 我 们 需要 先 了 解 不 同 环境 的 接口 ， 这 也 就 是 说 ， 我 们 需要 具备 足够 的 
领域 知识 来 创建 适当 的 抽象 。 

















1. 在 客户 端 获 取 和 设置 cookie 

在 浏览 器 端 获取 和 设置 cookie 的 接口 是 document.cookie (https://developer.mozilla.org/en- 
US/docs/Web/API/Document/cookie)。 你 可 以 使 用 console.log(document.cookie) 来 打印 当 
前 URL 可 访问 的 所 有 cookie。document.cookie 返回 的 键 值 对 以 分 号 隔 开 。 





Story=With Folded Hands;NoveL=The Humanoids 











这 个 字符 串 值 本 身 比 较 难 用 ， 但 我 们 可 以 轻松 地 将 其 转换 成 对 象 ， 并 将 cookie 的 名 字 作 为 
对 象 的 键 名 ， 或 者 我 们 也 可 以 实现 一 个 函数 来 根据 名 字 获 取 cookie 的 值 ， 如 下 所 示 。 














function getCookieByName(name) { 
Let cookies = document.cookie.split(';') 


for (let i = 0; i < cookies.length; i++) { 
let [key, value] = cookies[i].split('="'); 
if (key === name) { 
return value; 
} 
} 
} 


设置 cookie 的 接口 是 相同 的 ， 只 是 document.cookie 的 右 侧 要 赋予 新 cookie 的 值 。 


document .cookie="bnwq=A Love of nature keeps no factories busy;path=/" 


2. 在 服务 器 端 获 取 和 设置 cookie 
正如 9.2 节 中 提 到 的 一 样 ， 服 务 器 端 获 取 和 设置 cookie 的 实现 方式 不 尽 相 同 。 在 Node 中 ， 
可 以 通过 http 模块 从 请 求 头 中 获取 cookie， 如 例 9-1 所 示 。 











例 9-1 在 Node 服务 器 端 通过 名 字 获 取 cookie 的 值 
import http from 'http'; 





function getCookieByName(name, cookies) { 
for (let i = 0; i < cookies.length; i++) { 
let [key, value] = cookies[i].split('="'); 
if (key === name) { 
return value; 
} 
} 
} 


http.createServer(function (request, response) { 
Let someCookie = getCookieByName('some-cookie', request.headers.cookies); 
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response.end('Hello World\n'); 
}).listen(8080); 





本 书 一 直 使 用 hapi 作为 应 用 服务 





例 9-2 在 服务 器 端 使 用 hapi 通过 名 


import Hapi from 'hapi'; 


字 获 取 cookie 的 值 


const server = new Hapi.Server({ 
debug: { 


request: ['error'] 


} 


server .route({ 
method: "GET ' ， 
path: {anything*}, 
handler: (request, reply) => { 
let someCookie = request.state['some-cookie']; 
reply('Hello World\n'); 
} 
]); 
]); 


server .start(); 





在 Node 中 ,使 用 http 模块 来 设置 cookie 是 相当 简单 的 (如 例 9-3 所 示 ) 。 


例 9-3 在 Node 服务 器 端 设置 cookie 
import http from 'http'; 





http.createServer(function (request, response) { 
response.writeHead(200, { 


'Set-Cookie': 'some-cookie=some vaLue ' ， 


"Content -Type' : 'text/plain' 
}); 


response.end('Hello World\n'); 
}).listen(8080); 


使 用 hapi 来 设置 cookie 也 是 很 简单 的 (如 例 9-4 所 示 )。 


例 9-4 在 服务 器 端 使 用 hapi 来 设置 cookie 


import Hapi from 'hapi'; 





const server = new Hapi.Server({ 
debug: { 


request: ['error'] 


} 


server.route({ 
method: 'GET', 
path: {anything*}, 
handler: (request, reply) => { 


器 。hapi 提供 了 一 个 更 加 便捷 的 接口 ， 如 例 9-2 所 示 。 
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reply('Hello World\n').state('some-cookie', 'some value'); 


} 
]}); 
}); 


server .start(); 


3. 创建 接口 

我 们 对 cookie 是 如 何在 客户 端 和 服务 器 端 工 作 的 已 经 有 了 更 深入 的 理解 ， 现 在 是 时 候 创 建 
标准 的 接口 来 获取 和 设置 cookie 了 。 这 个 接口 (如 例 9-5 所 示 ) 将 取代 我 们 之 前 编写 的 特 
定 环境 的 实现 。 











例 9-5 同 构 cookie 接口 


class Cookie { 


// name (String): cookie 名 称 

// value (String): cookie 值 

// options.secure (Boolean): 设置 https only 

// options.expires (Number): 以 毫秒 为 单位 的 过 期 时 间 

// options.path (String): 将 cookie 限 制 在 某 个 特定 路 径 
// options.domain (String): 将 cookie 限 制 在 某 个 特定 域名 
// Returns: Undefined 

set(name, value, options = {}) { 














} 
// name (String): cookie 名 称 


// Returns: cookie 值 (String); 默认 值 为 nuLL 
get(name) { 


} 


} 
例 9-5 中 描述 的 这 个 接口 需要 提供 给 路 由 处 理 器 实例 进行 调用 ， 以 便 应 用 的 开发 者 可 以 在 


请 求 /响应 生命 周期 中 以 及 在 控制 器 绑 定 到 客户 端 之 后 调用 这 个 API。 要 想 满足 这 些 要 求 ， 
其 中 一 种 可 选 方 案 是 在 控制 器 构造 函数 中 创建 一 个 context 对 象 。 






































constructor(context) { 
this.context = context; 


} 


4. 实现 客户 端 接口 

定义 好 接口 后 就 可 以 编写 客户 端的 实现 了 。 在 9.2 市 的 “在 客户 端 获 取 和 设置 cookie” 
中 ， 我 们 简单 地 介绍 了 一 些 cookie 方法 ， 以 帮助 说 明 原 生 浏览 器 API 的 工作 原理 。 在 
实际 的 应 用 中 ， 获 取 和 设置 cookie 还 需要 一 些 额外 的 工作 ， 比 如 正确 地 对 值 进行 编码 。 














编码 cookie 





























从 技术 角度 上 讲 ， 除 了 分 号 、 喜 号 和 空格 之 外 ，cookie 是 不 需要 对 其 他 字符 
进行 编码 的 。 但 是 你 看 过 的 大 多 数 实现 可 能 都 会 对 值 和 名 称 进 
特别 是 在 客户 端 。 需 要 注意 的 重点 是 ， 在 客户 端 和 服务 器 端 要 一 致 地 进行 纺 


行 URL 编码 ， 


码 和 解码 ， 此 外 还 要 注意 不 能 对 值 进行 双重 编码 。 我 们 将 在 例 9-6 和 例 9-7 





中 解决 这 些 问 题 。 





好 在 很 多 现成 的 库 已 经 悄悄 地 帮 我 们 处 理 好 了 这 些 细节 。 我 们 的 应 用 将 选用 cookies-js 














(https:/www.npmjs.com/package/cookies-js) 这 个 库 ， 可 以 通过 以 下 命令 对 其 进行 安装 。 


$ npm install cookies-js --save 





现在 使 用 cookies-js 编写 例 9-5 中 定义 好 的 接口 。 客 户 端的 cookie 实现 (lib/cookie.client. 


js) 如 例 9-6 所 示 。 


例 9-6 客户 端的 cookie 实现 ,保存 在 ./lib/cookie.client.js 文件 中 


import cookie from 'cookies-js'; 
export default { 


get(name) { 
return cookie.get(name) || undefined; 


下 


set(name, value, options = {}) { 
// 将 毫秒 数 转换 为 秒 数 ,以 适 配 cookies- js 的 API 
if (options.expires) { 
options.expires /= 1000; 
} 
cookie.set(name, value, options); 


} 
} 


5. 实现 服务 器 端 接口 


服务 器 端的 实现 (./lib/cookie.js) 如 例 9-7 所 示 ， 我 们 需要 简单 地 包装 一 下 hapi 的 state 


接口 。 





例 9-7 服务 器 端的 cookie 实现 
export default function (request, reply) { 


// 编码 函数 依据 rfc 文 档 http://www.rfc-editor.org/rfc/rfc6265.txt 
// 遵循 了 “cookies-js” 客 户 端 实现 的 同一 种 模式 
function cleanName(name) { 

name = name.replace(/[^#$&+\^`|]/g, encodeURIComponent); 


return name.replace(/\(/g, '%28').replace(/\)/g, '%29'); 
} 
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function cleanValue(value) { 
return (value + '').replace(/[^!#$&-+\--:<-\[\]-~]/g, encodeURIComponent); 
} 


return { 


get(name) { 
return request.state[name] && decodeURIComponent(request.state[name]) || 
undefined; 


}， 


set(name, value, options = {}) { 
reply.state(cleanName(name), cleanValue(value), { 
// 如 果 值 不 存在 , 则 使 用 hapi 的 默认 值 
isSecure: options .secure || false, 
path: options.path || null, 
ttl: options.expires || null, 
domain: options.domain || null 
中) 
} 


3 
} 














6. 引入 cookie 实 现 
现在 实现 已 经 定义 好 了 ， 是 时 候 将 其 引入 到 请 求生 命 周期 中 了 (如 例 9-8 和 例 9-9 所 示 )。 





例 9-8 在 ./lib/index.client.js 文件 中 引入 客户 端 cookie 实现 
// 出 于 简洁 的 目的 ,省 略 部 分 代码 


import cookie from './cookie.client’'; 


// 出 于 简洁 的 目的 ,省 略 部 分 代码 
































export default class Application { 
// 出 于 简洁 的 目的 ,省 略 部 分 代码 
navigate(url, push=true) { 
// 出 于 简洁 的 目的 ,省 略 部 分 代码 
const controller = new Controller({ 
// 出 于 简洁 的 目的 ,省 略 部 分 代码 
query: query.parse(search), 
params: params, 
cookie: cookie 
]); 
// 1 


3 
// 出 于 简洁 的 目的 ,省 略 部 分 代码 
} 









































于 简洁 的 目的 ,省 略 部 分 代码 








上 上 

















例 9-9 在 ./lib/index.js 文件 中 引入 服务 器 端 cookie 实现 


import cookieFactory from './cookie'; 





export default class Application { 
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// 出 于 简洁 的 目的 ,省 略 部 分 代码 
addRoute(path, Controller) { 
// 出 于 简洁 的 目的 ,省 略 部 分 代码 
const controller = new Controller({ 
query: request.query, 
params: request.params, 
cookie: cookieFactory(request, reply) 
]); 
// 出 于 简洁 的 目的 ,省 略 部 分 代码 
} 
} 


7. 代码 示例 
现在 可 以 在 服务 器 端 和 客户 端 设置 和 获取 cookie 了 ， 如 例 9-10 所 示 。 











例 9-10 在 ./src/HelloController.js 文件 的 HelloController 类 (如 例 7-7 所 示 ) 的 index 
方法 中 同 构 设 置 cookie 的 示例 


index(application, request, reply, callback) { 
this.context.cookie.set('random', '_' + (Math.floor(Math.random() * 1000) + 1)， 
{path:; '/" }); 
callback(null); 

} 





图 9-1 展示 了 同 构 cookie 的 getter 与 setter 的 工作 原理 。 

















<controller>.context.cookie.get 
<controller>.context.cookie.set 


委派 给 委派 给 
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对 于 get 操 作 返 回 cookie 值 ， 
对 于 set 操 作 返 回 undefined 








9-1: 同 构 cookie 的 getter 与 setter 
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9.3 重 定向 请 求 


另 一 个 常见 的 、 需 要 跨 客户 端 和 服务 器 端 使 用 的 功能 是 重 定向 用 户 请 求 。 重 定向 可 以 让 不 
同 的 URL 访问 同一 个 资源 。 重 定向 的 用 例 包括 个 性 化 URL、 应 用 重 构 、 认 证 、 管 理 用 户 
流 (如 结账 ) 等 。 在 过 去 ， 只 有 服务 器 端 负责 重 定向 请 求 ， 通 过 向 客户 端 回复 一 个 HTTP 
重 定向 响应 的 方式 进行 。 











HTTP/1.1 301 Moved Permanently 
Location: http://theoatmeal.com/ 
Content-Type: text/html 
Content-Length: 174 





客户 端 将 使 用 重 定向 响应 中 指定 的 位 置 来 创建 新 的 请 求 ， 以 确保 用 户 可 以 接收 到 最 初 请 求 
的 实际 资源 。 


在 重 定向 响应 中 ， 另 一 个 重要 的 信息 是 HTTP 状态 码 。 状 态 码 可 以 提供 给 搜索 引擎 (可 以 
看 作 另 一 种 类 型 的 客户 端 ) 使 用 ， 用 来 确定 一 个 资源 是 暂时 迁移 还 是 永久 迁移 。 如 果 资 源 
是 永久 迁移 (状态 码 301) ， 那 么 与 之 前 页 面相 关 的 所 有 排名 信息 都 将 转移 到 新 的 位 置 中 。 
因此 ， 确 保重 定向 可 以 在 服务 器 端 被 正确 处 理 是 至 关 重 要 的 。 


























定义 API 

我 们 在 9.2 节 中 了 解 到 ， 虽 然 在 服务 器 端 设置 cookie 的 方法 各 不 相同 ， 但 是 在 互联 网 发 送 
的 信息 是 有 标准 合约 的 。 在 服务 器 端 进行 重 定 向 也 同样 如 此 。 虽 然 客户 端 没 有 创建 HTTP 
重 定向 的 概念 ， 但 它 拥有 修改 位 置 (URL) 的 能 力 ， 从 而 能 够 发 起 新 的 HTTP 请 求 。 与 获 
取 和 设置 cookie 一 样 ， 修 改 位 置 的 API 在 跨 浏 览 器 之 间 是 一 致 的 。 在 定义 API 之 前 ， 我 们 
再 次 沿 着 最 佳 实践 ， 进 一 步 熟 悉 将 要 创建 抽象 的 环境 。 

1. 在 客户 端 进行 重 定向 

在 客户 端 进行 重 定向 的 API 是 window.location (https://developer.mozilla.org/en-US/docs/ 
Web/APIWindow/location) 。 修 改 tocation 属性 的 方法 有 两 种 ， 如 例 9-11 所 示 。 




















例 9-11 在 客户 端 进行 重 定向 
window.location = 'http://theoatmeal.com/'; 
// 或 者 
window.Location.assign('http://theoatmeaL.com/' ); 
2. 在 服务 器 端 进行 重 定向 
在 Node 环境 中 ， 可 以 利用 http 模块 进行 重 定向 (如 例 9-12 所 示 )。 








例 9-12 在 Node 服务 器 端 进行 重 定向 
import http from 'http'; 


http.createServer(function (request, response) { 
response.writeHead(302, { 
'Location': 'http://theoatmeal.com/', 
'Content-Type': 'text/plain' 
})); 
response.end('Hello World\n'); 
}).listen(8080); 


在 hapi 中 ， 重 定向 的 写法 可 以 略 作 简 化 (如 例 9-13 所 示 )。 
例 9-13 使 用 hapi 在 服务 器 端 进行 重 定向 


import Hapi from 'hapi'; 





const server = new Hapi.Server({ 
debug: { 
request: ['error'] 


和 


server.route({ 
method: 'GET', 
path: {anything*}, 
handler: (request, reply) => { 
reply.redirect('http://theoatmeal.com/'); 


}); 
}); 


server .start(); 


3. 创建 接口 











在 整个 请 求 /响应 生命 周期 中 ， 重 定向 应 该 都 是 可 用 的 ， 以 便 应 用 可 以 在 需要 时 对 请 求 进 


行 重 定 向 。 在 我 们 的 示例 中 ， 这 指 的 就 是 控制 器 的 操作 方法 index 被 执行 时 。 在 服务 器 端 ， 
我 们 可 以 直接 使 用 hapi 的 重 定向 接口 repLy.redirect。 但 在 客户 端 ， 目 前 只 通过 const 
reply = () 之 人 旭 ; 定义 了 一 个 没有 执行 任何 操作 的 reply 函数 ， 因 此 需要 在 该 函数 中 添加 





[hil 


重 定向 的 功能 。 有 以 下 两 种 选择 。 




















(1) 为 服务 器 端的 hapi 的 reply 对 象 创建 一 个 fasade， 使 其 在 客户 端 可 以 完成 相同 的 功能 。 
(2) 在 客户 端的 reply 根 函数 中 添加 一 个 重 定向 的 API， 实 现 与 hapi 相同 的 功能 。 


如 果 选 择 方案 一 ， 那 么 就 可 以 自由 地 选择 需要 创建 的 API， 但 接 下 来 就 需要 设计 接口 并 创建 两 
种 不 同 的 实现 。 另 外 ， 仅 仅 为 了 定义 我 们 自己 的 重 定向 接口 就 将 整个 hapi 的 reply 对 象 封 装 起 





























来 ， 这 是 不 是 一 个 好 主意 呢 ? 对 于 创建 抽象 而 言 ， 这 种 程度 的 需求 并 不 是 一 个 很 好 的 理 





由 。 如 


有 果 选 择 方案 二 ， 那 么 我 们 就 必须 沿用 hapi 的 重 定向 接口 ， 但 不 需要 维护 这 么 多 代码 ， 创 建 的 





抽象 也 会 少 一 些 。 对 我 们 来 说 ， 抽 象 越 少 越 好 ， 特 别 是 在 早期 ， 因 此 我 们 选择 第 二 种 方案 。 
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4. 实现 客户 端 接口 








我 们 将 以 hapi 的 重 定向 接口 为 指导 来 实现 客户 端 接 口 。 我 们 只 需要 实现 redirect 
(https://hapijs.com/api/#response-object-redirect-methods) 方法 即 可 ， 如 例 9-14 所 示 。 其 他 
方法 不 需要 进行 任何 操作 ， 因 为 这 些 方法 是 用 来 设置 HTTP 状态 码 的 ， 对 客户 端 来 说 是 无 
关 紧 要 的 。 不 过 ， 我 们 仍然 需要 添加 这 些 方法 ， 以 确保 在 客户 端 调用 其 中 的 某 个 方法 时 不 








会 抛 出 错误 。 


例 9-14 重 定向 的 客户 端 实现 (./src/lib/reply.js 文件 ) 
export default function (application) { 


const reply = function () {}; 


reply.redirect = function (url) { 
application.navigate(url); 
return this; 


}; 


reply.temporary = function () { 
return this; 


}, 


reply.rewritable = function () { 
return this; 


}， 
repLy.permanent = function () { 
return this; 


} 


return reply; 


} 


5. 引入 客户 端 实现 














定义 好 实现 后 ， 现 在 是 时 候 将 其 引入 到 请 求生 命 周 期 了 。 我 们 可 以 参考 例 9-15， 将 代码 添 





加 到 ./lib/index.client.js 文件 中 。 


例 9-15 在 .lib/index.client.js 文件 中 引入 客户 端 重 定向 实现 


// 出 于 简洁 的 目的 ,省 略 部 分 代码 
import repLyFactory from './reply.client'; 
// 出 于 简洁 的 目的 ,省 略 部 分 代码 
































export default class Application { 
// 出 于 简洁 的 目的 ,省 略 部 分 代码 
navigate(url, push=true) { 
// 出 于 简洁 的 目的 ,省 略 部 分 代码 
const request = () => {}; 
Const reply = replyFactory(this); 
// 出 于 简洁 的 目的 ,省 略 部 分 代码 
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的 上 的 ,人 人 
6. 重 定 向 示例 
到 目前 为 止 ， 示例 中 的 HetlloController 的 入 口 点 一 直 为 /hello/{name*}。 这 很 棒 ， 但 如 
果 我 们 想 让 用 户 在 访问 应 用 根 目 录 http://localhost:8000/ 时 也 能 看 到 欢迎 信息 ， 该 怎么 做 
呢 ? 当然 可 以 设置 另 一 个 路 由 来 指向 这 个 控制 器 ， 但 如 果 只 是 想 让 用 户 在 第 一 次 访问 应 用 
时 才 显 示 这 个 欢迎 信息 ， 又 该 怎么 做 呢 ? 可 以 利用 cookie 和 重 定向 API 来 处 理 这 个 问题 
(如 例 9-16 所 示 )。 

















例 9-16 HomeController 类 的 重 定向 示例 〈./src/HomeController,js 文件 ) 
import Controller from './lib/Controller'; 


export default class HomeController extends Controller { 


index(application, request, reply, callback) { 
if (!this.context.cookie.get('greeting')) { 
this.context.cookie.set('greeting', '1', { 
expires: 1000 * 60 * 60 * 24 * 365 }); 
} 


return reply.redirect('/hello'); 


} 


toString(caLLback) { 
callback(null, 'I am the home page.'); 
} 


} 
接 下 来 ,需要 将 这 个 新 的 控制 器 添加 到 路 由 中 。 
const application = new Application({ 
'/hello/{name*}': HelloController, 


'/': HomeController 
}, options); 


最 后 ， 在 hello.html 中 添加 一 个 新 的 链接 ， 以 便 实现 在 客户 端 之 间 的 导航 。 





<p>hello </p> 

<ul> 
<li><a href="/hello/mortimer/smith" data-navigate>Mortimer Smith</a></li> 
<li><a href="/hello/bird/person" data-navigate>Bird Person</a></\li> 
<li><a href="/hello/revolio/clockberg" data-navigate>Revolio Clockberg</a></li> 
<li><a href="/" data-navigate>Home Redirect</a></li> 

</ul> 


现在 ， 当 访问 http://localhost:8000/ 时 ， 客 户 端 和 服务 器 端 都 可 以 帮 我 们 重 定向 到 http:// 
localhost:8000/hello。 这 种 方式 让 我 们 可 以 灵活 地 实现 备 种 有 条 件 的 重 定向 ， 并 且 可 以 按 需 
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设置 相应 的 HITP 返回 码 。 
图 9-2 展示 了 我 们 的 同 构 重 定向 抽象 。 











委派 给 hapi 
app.navigate reply.redirect 
(index.client.js) (index.js) 

















图 9-2: 同 构 重 定向 


9.4 ”小结 


在 本 章 中 ， 我 们 创建 了 两 个 常见 的 抽象 : 获取 和 设置 cookie 以 及 重 定向 ， 大 部 分 的 同 构 应 
用 都 离 不 开 这 两 个 功能 。 我 们 还 了 解 了 在 构建 同 构 JavaScript 应 用 的 上 下 文中 ， 应 该 何 时 
进行 抽象 以 及 为 什么 需要 抽象 。 在 未 来 决定 是 否 应 该 使 用 抽象 时 ， 这 些 示 例 和 知识 将 帮助 
我 们 作出 更 加 明智 的 选择 ， 并 在 需要 抽象 时 更 加 合理 地 使 用 它 。 























完整 的 代码 示例 
通过 在 终端 中 运行 npm install thaumoctopus-mimicus@"0.5.x" 命令 ， 可 以 安 


装 本 章 的 完整 代码 示例 。 
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序列 化 、 反 序列 化 和 添加 事件 监听 





Jason Strimpel 


第 8 章 为 客户 端 添 加 了 执行 请 求 /响应 生命 周期 的 功能 。 第 9 章 又 创建 了 一 些 同 构 的 抽象 ， 
包括 获取 和 设置 cookie 以 及 重 定向 用 户 请 求 。 这 些 新 特 性 将 我 们 的 应 用 框架 从 仅 适用 于 服 
务 器 端 变 成 了 两 端 通用 的 解决 方案 。 在 实现 完整 解决 方案 的 路 上 ， 我 们 已 经 取得 了 很 大 的 
进展 ， 但 目前 仍然 缺少 同 构 JavaScript 应 用 的 一 个 关键 组 成 部 分 : 在 客户 端 无 颖 连接 服务 
器 端 遗 留 内 容 的 能 力 。 


从 本 质 上 来 说 ， 同 构 应 用 应 该 能 够 获得 服务 器 端 浑 染 的 标记 并 绑 定 到 应 用 中 ， 就 像 SPA 应 
用 在 客户 端 泻 染 那样 。 这 意味 着 ， 在 服务 器 端 用 于 泻 染 控制 器 响应 的 任何 数据 都 应 该 能 够 
在 客户 端 中 使 用 ， 以 便 用 户 开 始 与 应 用 进行 交互 时 就 可 以 处 理 这 些 数据 ， 如 通过 表单 。 为 
了 实现 用 户 交 互 ， DOM 事件 处 理 器 同样 需要 进行 绑 定 。 为 了 在 客户 端 实现 rehydration 过 
程 ， 必 须 实现 以 下 4 个 步骤 。 


(1) 在 服务 器 端 序列 化 数据 。 

(2) 在 客户 端 创建 路 由 处 理 控 制 器 实例 。 
(3) 在 客户 端 反 序列 化 数据 。 

(4) 在 客户 端 绑 定 DOM 事件 处 理 器 。 
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定义 rehydration 

在 本 章 的 剩余 部 分 和 其 他 同 构 JavaScript 的 参考 资料 中 ， 你 会 频繁 地 看 到 术 
语 rehydration。 在 同 构 JavaScript 应 用 的 上 下 文中 ， 服 务 器 端 使 用 某 种 状态 
来 泻 染 页 面 响应 ，rehydration 指 的 就 是 重新 生成 这 种 状态 的 行为 ， 其 中 包括 
实例 化 控制 器 和 视图 对 象 ， 以 及 基于 页 面 泻 染 用 到 的 JSON 数据 创建 一 个 或 
多 个 对 象 ， 比 如 模型 或 POJO (plain old JavaScript object， 普 通 的 JavaScript 
对 象 ，https://en.wikipedia.org/wiki/Plain_Old_Java_Object)。 基 于 你 的 应 用 架 
构 ，rehydration 中 还 可 能 包含 其 他 对 象 的 实例 化 。 


























本 章 的 余下 部 分 将 关注 如 何在 应 用 中 实现 这 些 过 程 。 


10.1 序列 化 数据 


到 目前 为 止 ， 本 书 示例 用 到 了 cookie、 路 径 与 查询 参数 ， 以 及 硬 编码 的 默认 值 。 而 在 现实 
世界 中 ， 应 用 还 依赖 于 远程 的 数据 源 来 获取 数据 ， 比 如 REST (https://en.wikipedia.org/wiki/ 
Representational_state_transfer) 和 GraphQL (https://facebook.github.io/react/blog/2015/ 05/01/ 
graphql-introduction.html) 服务 。 在 JavaScript 应 用 中 ， 这 些 数据 最 终 会 存储 在 POJO 中 。 数 
据 连同 HTML 和 DOM 事件 处 理 器 一 起 创建 出 UI。 在 服务 器 端 ， 只 能 创建 出 界面 的 HTML 
部 分 ， 因 为 只 有 客户 端 接收 到 服务 器 端 响 应 并 进行 处 理 后 ， 才 能 进行 DOM 事件 的 绑 定 。 
客户 端的 处 理 、rehydration 以 及 DOM 事件 的 绑 定 工作 通常 依赖 于 服务 器 端 返回 的 状态 数 
据 。 此 外 ，rehydration 和 DOM 事件 绑 定 完成 后 ， 用 户 交 互 会 触发 这 些 事 件 ， 这 时 通常 需 
要 访问 这 些 数 据 ， 以 作出 修改 或 者 进行 判断 。 因 此 ， 在 rehydration 过 程 及 随后 的 时 间 中 ， 
确保 数据 的 可 访问 性 很 重要 。 问 题 是 ，POJO 不 能 作为 HTTP 请 求 中 的 一 部 分 在 网 络 中 发 
送 。 需 要 将 POJO 序列 化 为 一 个 字符 串 ， 使 其 可 以 传递 给 模板 、 被 客户 端 解析 以 及 赋值 给 


一 个 全 局 变量 。 



































序列 化 操作 可 以 通过 JSON.stringify 函数 (https://developer.mozilla.org/en-US/docs/Web/ 
JavaScript/Reference/Global_Objects/JSON/stringify) 来 完成 ， 该 方法 会 创建 POJO 对 应 的 
一 个 字符 串 表 示 。 虽 然 这 就 是 序列 化 POJO 的 标准 方法 ， 但 我 们 仍然 需要 在 例 7-3 中 的 
Controller 类 的 基础 上 添加 一 个 新 的 方法 ， 这 个 新 方法 可 以 在 服务 器 端 执 行 ， 并 返回 一 个 
序列 化 后 的 POJO。 

















serialize() { 
return JSON.stringify(this.context.data || {}); 
. 


对 我 们 的 应 用 来 说 ， 默 认 实 现 是 序列 化 ./src/lib/controller.js 文件 中 的 this.context.data 属 
性 。 不 过 ， 你 也 可 以 轻松 地 覆盖 这 个 默认 行为 ， 以 应 对 不 同 的 用 例 。 某 些 框 架 或 库 提 供 了 
设置 和 获取 POJO 数据 的 API， 比 如 Backbone 中 的 model (http://backbonejs.org/#Model) 
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或 者 Redux (http://redux.js.org/) 中 的 store (store.getState)。 对 于 上 述 及 其 他 的 客户 端 
数据 存储 方式 而 言 ，serialize 国 数 可 以 轻松 地 被 重 写 以 实现 自 定义 的 行为 ， 并 序列 化 这 
些 对 象 。 


正如 前 面 提 到 的 ， 在 Controller 类 的 serialize 方法 中 序列 化 的 数据 通常 是 
来 源 于 某 个 远程 位 置 的 。 这 些 数据 通常 使 用 HTTP 协议 作为 传输 机 制 。 这 在 
客户 端 可 以 通过 Ajax 来 完成 ， 而 在 服务 器 端 则 可 以 通过 Node 的 http 模块 
来 实现 。 获 取 数 据 的 工作 需要 特定 的 客户 端 实现 。 好 在 我 们 不 是 第 一 个 需要 
同 构 HTTP 客户 端的 开发 者 。 很 多 开源 库 都 可 以 实现 这 一 功能 ， 其 中 比较 流 
行 的 包括 isomorphic-fetch (https://www.npmijs.com/package/isomorphic-fetch) 



































和 superagent (https:Wwww.npmjs.comy/package/superagent) 。 


接 下 来 需要 修改 例 8-15 中 的 document 函数 (./src/options.js)， 以 调用 新 的 serialize 函数 ， 
如 例 10-1 所 示 。 





例 10-1 服务 器 端的 应 用 选项 调用 了 Controller 类 的 serialize 方法 
export defauLt { 
nunjucks: './dist', 
server: server, 
document: function (application, controller, request, reply, body, callback) { 
nunjucks.render('./index.html', { 
body: body, 
application: APP_FILE_PATH, 
state: controller.serialize(), 
}, (err, html) => { 
if (err) { 
return callback(err, null); 


} 
callback(null, html); 
]); 
} 
}; 








最 后 ， 需 要 在 模板 文件 ./src/index.html 中 创建 一 个 全 局 变量 ， 以 便 在 客户 端的 rehydration 
过 程 中 进行 访问 。 





并 


<script type="text/javascript"> 
window.__STATE = '{{state}}'; 
</script> 


确保 在 引入 应 用 源 代码 前 添加 <script> 。 
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10.2 创建 控制 器 实例 


客户 端 rehydration 过 程 中 的 下 一 步 是 为 当前 的 路 由 创建 一 个 控制 器 实例 。 这 个 实例 将 会 获 
得 序列 化 后 的 数据 并 绑 定 到 DOM 中 ， 使 得 用 户 可 以 与 服务 器 端 返回 的 HTML 界面 进行 交 
互 。 好 在 我 们 之 前 已 经 编写 了 相关 代码 ， 以 使 用 路 由 器 查找 相对 应 的 Controller 类 ， 并 创 
建 一 个 控制 器 实例 。 只 需要 对 代码 进行 一 下 重新 组 织 ， 就 可 以 重用 这 些 代码 了 。 
































在 例 8-4 创建 的 navigate 函数 中 ， 我 们 使 用 URL 在 应 用 的 路 由 表 中 查找 Controller 类 。 
如 果 找 到 ， 则 创建 对 应 的 控制 器 实例 。 这 部 分 代码 可 以 移 到 Application 类 (./src/lib/ 
index.client.js) 的 一 个 新 函数 中 ， 使 得 navigate 可 以 调用 这 个 新 函数 ， 函 数 的 定义 如 例 
10-2 所 示 。 








例 10-2 客户 端 Application 类 的 createController 方法 


createController(url) { 
// 分 割 路 径 和 搜索 字符 串 
Let UrLParts = url.split('?'); 


// 解构 urLParts 数 组 

Let [path, search] = UrLParts; 

// 判断 URL 路 径 是 否 匹配 路 由 器 中 的 路 由 

Let match = this.router.route('get', path); 
// 解构 路 由 的 路 径 和 参数 

Let { route, params } = match; 


// 在 路 由 表 中 查找 Controller 类 


Let Controller = this.routes[route]; 

















return Controller ? 
new Controller({ 
// 将 search 字 符 串 解析 为 对 象 
query: query.parse(search), 
params: params, 
cookie: cookie 
}) : undefined; 
} 


现在 可 以 在 navigate 函数 中 使 用 这 个 createController 函数 ， 以 及 另 一 个 即将 创建 的 函数 
rehydrate (如 例 10-3 所 示 )。 


例 10-3 客户 端 Application 类 的 修改 版 navigate 方法 和 rehydrate 方法 
// 封装 的 这 段 代码 在 rehydrate 方 法 和 start 方 法 中 的 popStateListener 都 会 用 到 
getUrtL() { 

Let { pathname, search } = window.Location; 
return ‘${pathname}${search}; 


} 





rehydrate() { 
this.controller = this.createController(this.getUr1()); 





navigate(url, push=true) { 
// 如 果 浏 览 器 不 支持 History API, 则 直接 设置 location 属 性 并 返回 
if (!history.pushState) { 
window.location = url; 
return; 


} 








Let previousController = this.controller; 
this.controller = this.createController(url) 


// 出 于 简洁 的 目的 ,省 略 函 数 体 的 余下 代码 


// 19.4 节 中 会 展示 完整 的 代码 示例 
} 


随后 start 函数 就 可 以 调用 rehydrate 函数 了 (如 例 10-4 所 示 )。 





例 10-4 客户 端 AppLication 类 的 start 方法 
start() { 
// 出 于 简洁 的 目的 ,省 略 前 面 的 代码 
// 将 rehydrate 调 用 添加 到 函数 底部 
this.rehydrate(); 
} 





窜 等 性 与 rehydration 

在 我 们 的 应 用 中 ， 控 制 器 的 构造 过 程 比 较 简 单 。 然 而 ， 在 某 些 情况 下 ， 构 造 
过 程 或 者 初始 化 的 逻辑 可 能 会 更 加 复杂 。 在 那些 场景 中 ， 确 保 初 始 化 逻辑 符 
合 究 等 性 (idempotence) 是 非常 重要 的 。 所 谓 归 等 性 ， 就 是 指 无 论 一 个 函数 
执行 多 少 次 ， 其 结果 都 应 该 是 相等 的 。 如 果 你 的 初始 化 过 程 需 要 依赖 闭 包 、 
计数 器 等 ， 那 么 这 样 的 初始 化 逻辑 就 不 是 寡 等 的 ， 导 致 rehydration 过 程 可 能 
会 发 生 错 误 。 举 例 来 说 ， 如 果 一 个 应 用 单 例 带 有 状态 ， 但 是 状态 没有 传输 到 
客户 端 ， 而 且 没 有 在 rehydration 过 程 开始 之 前 将 状态 添加 到 单 例 中 的 话 ， 那 
么 任何 依赖 于 这 份 状态 的 组 件 初 始 化 逻辑 都 可 能 会 在 客户 端 发 生 结果 变化 。 
























































10.3 反 序 列 化 数据 


在 上 一 节 中 ， 我 们 在 客户 端 应 用 的 rehydration 过 程 中 创建 了 控制 器 的 实例 。 现 在 我 们 需要 
序列 化 服务 器 端 创建 的 状态 ， 并 将 其 作为 服务 器 端 页 面 响应 的 一 部 分 传输 到 客户 端的 控制 
器 实例 。 这 项 工作 是 很 有 必要 的 ， 因 为 路 由 可 能 拥有 不 同 的 状态 ， 而 应 用 需要 依赖 这 些 状 
态 。 例 如 ， 如 果 服 务 器 端 浑 染 的 路 由 具有 某 些 交互 性 元 素 或 者 操作 数据 的 界面 ， 如 “添加 
到 购物 车 ”按钮 、 表 单 、 带 有 范围 选择 器 的 图 表 等 ， 那 么 用 户 很 可 能 会 需要 用 这 些 数据 与 
页 面 进 行 交互 、 重 新 泻 染 页 面 ， 或 者 维持 某 些 变 化 。 


在 10.1 节 中 ， 我 们 将 状态 数据 包含 到 了 页 面 响应 中 ， 因 此 我 们 现在 要 做 的 就 是 在 基 类 控制 
器 (./src/lib/controller.js) 中 实现 反 序列 化 方法 deserialize。 
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deserialize() { 
this.context.data = JSON.parse(window.__STATE_ ); 


} 


全 局 变量 

依赖 全 局 变量 通常 被 认为 是 一 种 精 糕 的 做 法 ， 因 为 这 会 导致 潜在 的 命名 冲突 
以 及 维护 问题 。 然 而 ， 现 在 并 没有 什么 办 法 可 以 完美 地 解决 这 个 问题 。 是 可 
以 将 数据 传递 到 一 个 函数 中 ， 但 随后 你 还 是 需要 通过 某 种 方式 将 这 个 函数 暴 
露 到 全 局 范围 当中 。 





























现在 ， 这 个 方法 可 以 成 为 rehydration 过 程 的 一 部 分 ， 将 数据 赋值 给 控制 器 实例 。 我 们 可 以 
将 数据 rehydration 添加 到 客户 端 Application 类 的 rehydrate 方法 中 (位 于 ./src/lib/index. 
client.js)， 如 下 所 示 。 
rehydrate() { 
this.controller = this.createControLLer(this.getUrL() ); 


this.controller.deserialize(); 


} 


10.4 添加 DOM 事 件 处 理 器 


rehydration 过 程 的 最 后 一 步 是 将 事件 处 理 器 添加 到 DOM 结构 中 。 拿 最 简单 的 方式 来 说 ， 
事件 绑 定 可 以 通过 调用 原生 方法 addEventListener 来 完成 ， 如 下 所 示 。 








document .querySeLector('body ' ) .addEventListener('"CLick' ，function (e) { 
console.log(e); 
}, false); 








某 些 库 将 事件 监听 函数 的 上 下 文 设置 为 创建 这 个 监听 器 的 视图 或 者 控制 器 对 象 。Backbone 
(http://backbonejs.org/#View-events) 这 样 的 库 提 供 了 接口 来 定义 事件 监听 器 。 这 些 事件 监 
听 器 通过 事件 委托 (https://learn.jquery.com/events/event-delegation/) 绑 定 到 包含 的 视图 元 
素 中 ， 以 减少 浏览 器 的 性 能 开销 。 我 们 只 打算 在 示例 中 添加 一 个 空 方法 attach 到 控制 器 
中 ， 这 个 方法 会 在 rehydration 过 程 中 被 调用 ， 甚 实现 细节 将 由 应 用 开发 者 来 完成 。 



































attach(eL) { 
// 待 应 用 开发 者 实现 
} 
除了 rehydration 过 程 外 ，attach 方法 还 会 作为 客户 端 路 由 响应 生命 周期 的 一 部 分 被 调用 。 
这 确保 了 无 论 是 在 客户 端 还 是 在 服务 器 端 ， 路 由 处 理 器 都 会 被 绑 定 到 DOM 中 。 例 10-5 展 
示 了 如 何在 客户 端 AppLication 类 的 rehydrate 方法 中 添加 DOM 事件 绑 定 。 
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例 10-5 在 rehydrate 方法 中 添加 DOM 事件 绑 定 
rehydrate() { 
Let targetEL = document.querySelector(this.options.target); 


this.controller = this.createController(this.getUr1()); 
this.controller.deserialize(); 
this.controller.attach(targetEl); 


} 


对 attach 方法 的 两 处 调用 确保 了 路 由 监听 器 总 是 能 够 绑 定 到 DOM 中 。 然 而 ， 这 段 代码 
还 存在 一 点 问题 一 一 只 有 绑 定 ， 没 有 解 绑 。 如 果 不 断 地 将 事件 处 理 右 添加 到 DOM 中 ， 而 
不 解 绑 之 前 的 处 理 器 ， 那 么 我 们 最 终 可 能 会 面临 内 存 溢出 (http://www.html5rocks.com/en/ 
tutorials/memory/effectivemanagement/) 的 问题 。 为 了 避免 这 一 问题 ， 可 以 添加 一 个 detach 
方法 到 基 类 控制 器 中 ， 并 将 其 作为 客户 端 路 由 处 理 器 生命 周期 的 一 部 分 被 调用 ， 如 例 10-6 
所 示 。 与 attach 类 似 ，detach 也 是 一 个 空 方法 ， 实 现 细 节 留 给 应 用 开发 者 自行 编写 。 














detach(el) { 
// 待 应 用 开发 者 实现 
} 








例 10-6 客户 端 Application 类 的 完整 版 navigate 方法 
navigate(url, push=true) { 
// 如 果 浏 览 器 不 支持 History API, 则 直接 设置 location 属 性 并 返回 
if (!history.pushState) { 
window.Location = url; 
return; 


} 











Let previousController = this.controller; 
this.controller = this.createController(url) 





// 如 果 控 制 器 创建 成 功 , 则 进行 导航 
if (this.controller) { 

// 请 求 和 响应 桩 函数 

const request = () => {}; 

const reply = replyFactory(this); 


if (push) { 
history.pushState({}, null, url); 
} 


// 执行 控制 器 操作 
this.controller.index(this, request, reply, (err) => { 
if (err) { 
return reply(err); 


} 


let targetEL = document.querySelector(this.options.target); 
if (previousController) { 
previousController .detach(targetEL) ; 


} 
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// 泻 染 控制 器 响应 
this.controller.render(this.options.target, (err, response) => { 
if (err) { 
return reply(err); 


} 


reply(response); 
this.controller.attach(targetEl); 


}); 
于 和 
} 
} 


10.5 ”验证 rehydration 过 程 


现在 我 们 已 经 完成 了 核心 部 分 ， 应 用 可 以 恢复 状态 并 将 事件 绑 定 到 DOM 中 ， 我 们 应 该 
能 够 rehydrate 应 用 了 。 要 想 测 试 状态 恢复 是 否 能 够 正常 工作 ， 可 以 先 在 HeLLoControtter 
类 (如 例 7-7 所 示 ) 的 index 方 法 中 生成 一 个 随机 数 ， 并 将 其 作为 属性 保存 在 this. 


context.data 中 。 























index(application, request, reply, callback) { 


this.context.cookie.set('random', '_' + (Math.floor(Math.random() * 1000) + 1)， 
{ path: '/' }); 

this.context.data = { random: Math.floor(Math.random() * 1000) + 1 }; 

callback(null); 


} 


接 下 来 ， 需 要 将 this.context.data 添加 到 HelloController 类 的 toString 方法 中 ， 以 作 
为 演 染 上 下 文 的 一 部 分 。 


toString(callback) { 
// 这 里 可 以 更 优雅 地 使 用 0bject.assign 进 行 处 理 
// 但 出 于 简洁 的 目的 ,我 们 没有 引入 polyfill 依 赖 
let context = getName(this.context); 
context.data = this.context.data; 











nunjucks.render('hello.html', context, (err, html) => { 
if (err) { 
return callback(err, null); 


} 


callback(null, html); 


]); 
} 


现在 可 以 在 hello.html 模板 中 泻 染 这 个 随机 数 了 。 
<p>hello {{fname}} {{lname}}</p> 


<p>Random Number in Context: {{data.random}}</p> 
<ul> 





<li><a href="/hello/mortimer/smith" data-navigate>Mortimer Smith</a></li> 
<li><a href="/hello/bird/person" data-navigate>Bird Person</a></\i> 
<li><a href="/hello/revolio/clockberg" data-navigate>Revolio Clockberg</a></li> 
<li><a href="/" data-navigate>Home Redirect</a></li> 

</ul> 





接 下 来 ， 在 attach 方法 中 将 this.context.data 打印 出 来 ， 并 比较 值 是 否 一 致 。 


attach(eL) { 
console. log(this.context.data.random); 


} 


还 可 以 在 attach 方法 中 添加 一 个 点 击 事件 监听 器 ， 以 验证 传递 到 方法 中 的 目标 元 素 是 否 正 
确 ， 事件 监听 器 会 绑 定 到 这 个 元 素 中 。 








attach(el) { 
console.log(this.context.data.random); 
el.addEventListener('click', function (e) { 
console.log(e.currentTarget); 
}, false); 
} 


接 下 来 ， 需 要 确保 能 够 解 绑 在 attach 方法 中 绑 定 的 事件 监听 器 。 如 果 不 这 样 做 的 话 ， 每 
次 跳 转 到 /hello/{name*} 路 由 时 都 会 添加 一 个 新 的 事件 监听 器 。 首 先 ， 需 要 将 attach 方 
法 中 的 事件 监听 函数 分 离 到 命名 函数 ， 以 便 在 移 除 事 件 监 听 时 可 以 传递 函数 的 引用 。 在 
HelloController 类 的 顶部 创建 一 个 函数 表达 式 。 
































function onClick(e) { 
console.log(e.currentTarget); 


} 
现在 ， 可 以 修改 attach 方法 并 添加 一 个 detach 方法 。 


attach(eL) { 
console.log(this.context.data.random); 
this.clickHandler = el.addEventListener('click', onClick, false); 


3 


detach(el) { 
el.removeEventListener('click', onClick, false); 


} 
如 果 重 新 加 载 页 面 并 点 击 任意 地 方 ， 你 应 该 可 以 看 到 控制 台中 的 body 元 素 。 如 果 跳 转 页 


面 ， 清 空 控制 台 信息 并 再 次 点 击 ， 你 应 该 只 能 看 到 一 条 日 志 信息 ， 因 为 detach 方法 会 移 除 
上 一 个 路 由 中 的 事件 监听 器 。 









































图 10-1 高 度 概 括 了 我 们 的 目标 。 
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10-1: 客户 端 rehydration 











10.6 小结 

本 章 的 知识 点 比较 多 。 我 们 来 快速 回顾 一 下 : 
。 在 服务 器 端的 页 面 响应 中 序列 化 路 由 数据 
。 在 客户 端 创建 路 由 处 理 器 实例 


。 反 序 列 化 数据 
。 将 路 由 处 理 需 绑 定 到 DOM 中 











无 论 路 由 是 在 客户 端 还 是 在 服务 器 端 进行 泻 染 ， 以 上 的 rehydration 步骤 都 可 以 确保 应 用 能 
为 用 户 提供 相同 的 功能 ， 同 时 也 避免 了 数据 的 重复 请 求 ， 优 化 了 性 能 。 














完整 的 代码 示例 
通过 在 终端 中 运行 npm install thaumoctopus-mimicus@"0.6.x" 命令 ， 可 以 安 


装 本 章 的 完整 代码 示例 。 
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Jason Strimpel 


第 二 部 分 洱 盖 了 大 量 的 材料 ， 这 些 材料 可 以 帮助 我 们 次 刻 理 解 同 构 JavaScript 应 用 的 工作 
原理 。 掌 握 这 些 知识 后 ， 现 在 你 可 以 评估 和 修改 现 有 的 解决 方案 了 ， 或 者 创造 一 些 全 新 的 
内 容 来 满足 具体 的 需求 。 不 过 ， 在 勇 歼 地 探索 新 世界 之 前 ， 先 回顾 一 下 我 们 介绍 过 的 内 
容 ， 这 有 助 于 更 好 地 准备 接 下 来 的 同 构 应 用 开发 工作 。 我 们 从 快速 回顾 第 二 部 分 开始 ， 包 
括 我 们 做 了 什么 ， 为 什么 要 这 样 做 ， 以 及 其 限制 。 


11.1 生产 准备 


在 第 二 部 分 中 ， 我 们 逐步 建立 了 一 个 应 用 核心 ， 并 在 此 基础 之 上 编写 了 一 个 简单 的 示例 。 
虽然 这 有 助 于 学 习 相关 概念 ， 但 我 们 不 建议 你 在 生产 环境 中 直接 使 用 这 个 应 用 核心 ， 因 为 
这 个 核心 是 专 为 本 书 而 编写 的 ， 仅 作为 一 种 学 习 工 具 。 对 于 生产 环境 而 言 ， 还 有 更 好 的 库 
可 以 用 于 处 理 一 些 通用 的 功能 ， 比 如 ， 可 以 使 用 history (https://www.npmjs.com/package/ 
history) 这 个 库 来 管理 会 话 历 史 。 为 了 专注 于 学 习 基 本 概念 和 原生 API， 我 们 有 意 没 有 使 
用 history 和 其 他 的 一 些 模块 ， 以 避免 只 学 习 一 个 库 的 API。 我 们 还 是 建议 你 利用 一 些 使 
用 量 大 的 、 支 持 度 高 的 开源 解决 方案 ， 因 为 这 些 库 能 够 应 对 一 些 边界 情况 ， 而 我 们 自己 编 
写 的 代码 可 能 没有 考虑 到 这 些 情况 。 


11.2 ”衡量 架构 
在 第 二 部 分 中 ， 我 们 强调 创建 一 个 通用 的 请 求 /响应 生命 周期 ， 实 际 上 你 可 能 并 不 需要 这 





















































299 


样 做 。 例 如 ， 如 果 打 算 使 用 React (https://facebook.github.io/react/) 的 相关 技术 栈 ， 那 么 
你 可 能 就 不 需要 这 种 程度 的 抽象 。 互 联网 上 已 经 有 很 多 文章 介绍 了 使 用 React 和 其 他 的 开 
源 库 来 创建 一 个 同 构 解决 方案 是 多 么 简单 ， 比 如 “Exploring Isomorphic JavaScript”(http:// 
nicolashery.com/exploring-isomorphic-javascript/) 这 篇 文章 。 








注意 权衡 一 Web 和 相关 的 技术 一 直 在 发 生变 化 ， 但 公司 很 少 会 同意 重 写 整个 应 用 (即使 
同意 了 ， 结 果 通 常 也 会 以 失败 告终 )。 如 果 想 适应 变化 ， 那 么 一 个 轻 量 级 的 结构 层 可 以 让 
你 轻松 地 测试 新 技术 ， 并 分 阶段 地 迁移 旧 代 码 。 当 然 ， 你 需要 在 抽象 与 应 用 预期 的 生命 周 
期 、 用 例 细 市 以 及 其 他 因素 间 进 行 权 衡 。 





变化 是 永恒 的 
Web 的 快速 演变 不 仅 体现 在 历史 中 ， 还 体现 在 依然 鼓励 你 使 用 代码 转译 器 的 
如 今 的 JavaScript 社区 中 。 我 们 现在 编写 的 代码 好 像 是 日 新 月 异 的 一 一 事实 
也 确实 如 此 。 今 后 JavaScript 每 年 都 会 发 布 新 的 版 本 。 请 记 住 ， 这 个 新 版 本 
的 发 布 计 划 只 是 你 将 面临 的 改变 中 的 一 部 分 。 模 式 、 库 和 工具 的 演变 更 为 了 迅 
独 。 因 此 ， 请 做 好 准备 迎接 这 些 改变 吧 ! 


























无 论 何 处 漫游 ， 请 快 聚首 

请 看 清 周遭 洪水 已 经 围 拢 

面 对 现 实 吧 ， 你 的 骨头 将 很 快 被 浸透 

若 你 的 时 代 仍 有 价值 ， 值 得 拯救 

那 就 赶快 泗 

否则 将 沉沦 如 石头 

一 一 绝 勃 ' 迪 伦 的 歌曲 The Times They Are a Changin’ 

虽然 这 首 歌 的 创作 目的 是 为 了 描述 一 个 完全 不 同 的 概念 ， 但 这 部 分 歌词 却 很 好 地 描述 了 
Web 开发 者 日 复 一 日 年 复 一 年 面临 的 斗争 : 应 对 变化 。 新 的 浏览 器 API、 新 的 库 、 语 言 的 
改进 、 新 兴 的 开发 和 应 用 架构 模式 在 不 断 涌现 ， 这 会 让 你 感觉 到 开发 人 员 的 价值 和 应 用 的 
质量 将 被 淹没 在 这 些 新 的 浪潮 中 。 





幸运 的 是 ， 即 使 变化 的 速度 越 来 越 快 ， 但 同 构 JavaScript 应 用 依然 能 够 维持 稳定 (至少 就 
其 生命 周期 而 言 )， 因 此 你 可 以 在 变化 中 寻求 一 点 安宁 。 这 是 因为 同 构 应 用 的 设计 是 基于 
Web 的 HTTP 请 求 /响应 生命 周期 的 。 用 户 使 用 URL 对 一 个 资源 发 起 请 求 ， 服 务 器 端 响应 

份 净 荷 数据 。 唯 一 的 区 别 是 ， 同 构 应 用 的 生命 周期 可 以 同时 在 客户 端 和 服务 器 端 使 用 ， 
因此 ， 在 作出 架构 和 实现 的 决策 时 ， 你 需要 认识 到 生命 周期 中 的 几 个 关键 点 。 
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路 由 
应 该 建立 一 个 负责 将 URL 映射 到 函数 的 路 由 器 。 











函数 执行 
函数 应 该 通过 异步 的 方式 执行 ， 即 一 旦 函数 执行 完成 ， 就 应 该 执行 一 个 回调 函数 。 
响应 / 泻 染 





一 旦 执行 完成 ， 就 应 该 通过 异步 的 方式 执行 渲染 。 
序列 化 
在 执行 、 泻 染 阶段 获取 和 使 用 过 的 所 有 数据 都 应 该 成 为 服务 器 端 响应 的 一 部 分 。 
反 序 列 化 
任何 对 象 和 数据 都 需要 在 客户 端 重新 创建 ， 因 为 当 用 户 和 应 用 进行 交互 时 ， 客 户 端 运行 
时 需要 用 到 这 些 数据 。 
添加 事件 
应 绑 定 事件 处 理 器 ， 以 便 应 用 可 供 交 互 。 



































就 是 这 么 简单 。 所 有 其 余 的 补充 都 是 为 了 增强 并 实现 细节 。 至 于 如 何 将 这 些 步骤 连接 起 来 
以 及 利用 哪些 库 ， 则 完全 取决 于 你 。 例 如 ， 你 可 以 选择 将 一 些 开源 解决 方案 松散 地 耦合 到 
一 起 ， 又 或 者 仿照 本 书 建立 一 个 更 加 正式 的 生命 周期 ， 顺 带 将 一 些 最 新 的 JavaScript 库 融 
入 其 中 。 


























保持 应 用 核心 简洁 

请 记 住 ， 向 可 重用 的 应 用 核心 中 添加 的 模式 与 标准 越 多 ， 其 灵活 性 就 越 低 ， 
并 且 随 着 时 间 的 推移 ， 应 用 在 适应 变化 时 会 更 加 容易 受 损 。 例 如 ， 在 准备 创 
建 JavaScript 框架 时 ， 我 曾经 效力 的 团队 决定 对 Backbone 和 RequireJS 进行 
一 些 标准 化 的 工作 ， 因 为 这 些 框架 当时 还 很 流行 。 从 那 以 后 ， 新 的 模式 和 库 
不 断 出 现 。 这 些 标 准 使 得 应 用 层 很 难 适应 新 的 变化 。 这 里 的 技巧 就 是 ， 要 在 
提供 价值 和 保持 灵活 性 之 间 找 到 平衡 。 























让 





























为 了 支持 正式 的 生命 周期 所 添加 的 结构 的 程度 应 该 根据 应 对 变化 的 需求 而 定 。 应 对 变化 的 
需求 也 应 该 和 应 用 的 预期 寿命 保持 平衡 。 如 果 一 个 应 用 将 在 几 年 内 被 取代 ， 那 么 这 个 应 用 
可 能 并 不 值得 我 们 付出 创建 一 个 正式 生命 周期 的 代价 。 而 是 否 需要 标准 化 ， 即 是 否 打算 在 
此 基础 上 构建 多 个 应 用 ， 也 应 该 成 为 考虑 因素 。 


如 果 和 希望 在 任何 时 候 都 具有 响应 变化 的 能 力 ， 那 么 在 创建 应 用 核心 时 使 用 控制 反 转 
(inversion of control，https://en.wikipedia.org/wiki/Inversion_of_control) 来 切换 库 对 你 来 说 
应 该 非常 重要 。 最 后 ， 不 要 让 其 他 人 来 说 你 需要 什么 或 不 需要 什么 。 你 比 任何 人 都 更 加 清 
楚 自 己 的 具体 情况 、 同 事 需 求 、 业 务 需求 以 及 客户 需求 。 























11.3 “小结 

这 就 是 第 二 部 分 的 全 部 内 容 。 和 希望 你 和 我 们 一 样 享 受 这 段 旅程 。 但 本 书 尚未 结束 ， 精 彩 还 
在 后 面 。 在 第 三 部 分 中 ， 业 界 专 家 大 方 地 贡献 了 他 们 的 宝贵 时 间 来 与 我 们 分 享 现 实 世界 中 
的 解决 方案 。 我 建议 你 阅读 并 吸取 他 们 分 享 的 每 一 份 智慧 ， 因 为 这 么 做 使 我 大 开 了 眼界 ， 
同时 对 Web 也 有 了 更 加 深刻 的 理解 。 
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第 三 部 分 


现实 世界 的 解决 方案 





现在 是 同 构 JavaScript 的 黄金 时 代 。 从 开始 编写 本 书 起 ， 我 们 见证 着 同 构 JavaScript 世界 发 
生 的 改变 与 进化 。 随 着 JavaScript 语言 和 服务 器 端 JavaScript 环境 的 日 趋 完 善 ，JavaScript 
被 更 广泛 地 采用 。 它 提供 了 一 个 令 人 难以 置信 的 工具 库 生 态 圈 ， 在 浏览 器 端 和 服务 器 端 发 
挥 着 主导 作用 。 








不 同 背 景 的 开发 者 正 聚 焦 于 JavaScript。 在 2016 年 的 O'Reilly Fluent Conference (https:// 
conferences.oreilly.com/ftuentf-ca) 上 ， 我 们 有 幸 见 到 了 许多 正在 使 用 本 书 中 的 概念 与 实现 
的 开发 人 员 。 我 们 还 有 幸 与 JavaScript 社区 的 一 些 思想 领袖 进行 了 交流 。 我 们 在 讨论 中 发 
现 ， 在 很 多 情况 下 ，Node.js 进入 企业 应 用 的 契机 其 实 就 是 同 构 JavaScript。 同 构 JavaScript 
真正 改变 了 很 多 团队 的 做 法 ， 这 些 团队 在 一 些 情况 下 习惯 于 使 用 不 同 的 服务 器 端 技术 栈 ， 
上 昌 他 们 现在 不 得 不 承认 服务 器 端 JavaScript 确实 有 很 多 好 处 。 同 构 JavaScript 的 意义 现在 越 
来 越 不 容 忽 视 ， 特 别 是 它 对 初始 页 面 加 载 性 能 以 及 搜索 引擎 索引 和 优化 的 影响 。 












































直到 目前 ， 本 书 一 直 专 注 于 为 建立 同 构 JavaScript 应 用 提供 必要 的 基础 知识 。 我 们 围绕 同 
构 JavaScript 应 用 介绍 了 相关 概念 ， 并 建立 了 一 个 种 子 项 目 来 实现 这 些 概念 。 在 这 一 部 分 
中 ， 我 们 将 探讨 现 有 的 解决 方案 ， 研 究 一 下 采用 了 (或 即将 采用 ) 同 构 JavaScript 的 各 种 
开发 框架 。 我 们 还 将 看 到 同 构 项 目 应 用 在 不 同 公司 、 不 同 项 目 、 不 同 技术 栈 中 的 例子 。 这 
些 案例 研究 概述 了 团队 在 构建 同 构 JavaScript 应 用 时 必须 解决 的 各 种 问题 。 我 们 希望 这 一 
部 分 能 为 你 提供 一 幅 立 体 的 画面 ， 阅 明 在 采用 同 构 JavaScript 时 可 供 参 考 的 解决 方案 。 
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Jason Strimpel、 Maxime Najim 


在 沃尔玛 实验 室 工作 时 ， 我 们 正经 历 着 应 用 架构 的 赔 变 期 。 现 在 ， 我 们 逐渐 开始 从 温暖 、 
安全 的 Java 草 赔 变 出 迷人 的 同 构 JavaScript 之 愤 。 我 们 将 在 本 章 中 分 享 这 个 转变 过 程 。 


12.1 物种 起 源 


自 2013 年 初 以 来 , 沃尔玛 经 历 了 许多 变化 。 这 是 因为 执行 层 领导 在 多 年 前 就 着 手 改 革 ， 
以 便 无 颖 连接 沃尔玛 客户 从 线 上 到 线 下 的 体验 。 这 其 中 的 很 大 一 部 分 工作 是 对 技术 和 基础 
设施 的 投资 。 这 成 为 了 一 个 演进 的 过 程 ， 某 些 项 目 已 经 在 蓬勃 发 展 ， 而 其 他 项 目 则 已 经 停 
止 了 。 导 致 项 目 停 止 的 原因 是 多 样 的 ， 但 我 们 一 直 在 吸取 失败 的 教训 并 不 断 前 进 。 其 中 
和 本 书 最 密切 相关 的 新 进展 是 ，walmart.com (https://www.walmart.com/) 正 逐 渐 减 少 使 用 
Java 和 Backbone + Handlebars 的 方式 来 演 染 UI 层 。 在 软件 世界 中 ， 没 有 什么 东西 会 真正 
消 直 ， 除 非 企 业 倒闭 或 者 某 个 特定 计划 取消 。 使 用 其 他 技术 来 解决 相同 的 问题 只 是 换 了 一 
种 ( 可 能 会 更 好 的 ) 解决 方式 而 已 (如 图 12-1 所 示 )。 
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图 12-1: 在 软件 世界 中 ， 没 有 什么 东西 会 真正 消逝 


我 们 将 walmart.com 面临 的 问题 交 由 React.js 和 Node.js 来 解决 。 


12.1.1 问题 

通常 而 言 ， 人 们 判断 问题 是 否 得 以 解决 仅仅 只 是 简单 地 将 其 和 现 有 的 解决 方案 进行 对 比 ， 
如 交付 walmartcom。 使 用 新 开发 的 、 未 经 证 实 的 技术 栈 来 实现 同样 的 功能 是 一 个 比较 耗 
时 的 工作 ， 本 身 不 会 为 企业 或 者 用 户 带 来 任何 真正 的 价值 。 这 只 是 将 鸡蛋 从 一 个 篮子 移 到 
另 一 个 篮子 而 已 。 








真正 的 问题 不 仅仅 是 交付 walmartcom， 而 是 考虑 如 何 进行 交付 ， 以 及 如 何在 多 重 租户 和 
客户 之 间 扩 展 交 付 解决 方案 ， 即 使 这 个 问题 定义 不 能 充分 地 描述 问题 的 真实 范围 ， 以 及 添 
加 一 个 新 技术 栈 带 来 的 潜在 价值 。 真 正 的 价值 取决 于 新 技术 和 新 工艺 是 否 能 比 之 前 的 解决 
方案 更 好 地 遵循 以 下 的 指导 原则 : 


。 吸引 并 留 住 工程 人 才 
。 提高 开发 效率 
。 改善 代码 质量 


遵循 这 些 指导 原则 最 终 将 降低 企业 的 工程 成 本 ， 并 提供 更 好 、 更 快 的 用 户 体验 。 例 如 ， 如 
果 切 换 到 支持 跨 服务 器 端 和 客户 端 发 布 的 单一 语言 与 运行 时 ， 则 可 以 提高 开发 效率 ， 进 而 
使 得 企业 可 以 在 跨 渠道 之 间 快 速 地 交付 产品 的 增强 功能 ， 还 能 减少 开发 成 本 。 另 一 个 例子 
是 为 工程 师 提 供 他 们 热 囊 于 使 用 的 工具 和 技术 ， 从 而 吸引 和 留 住人 才 。 这 有 助 于 改进 技术 
栈 以 及 开发 人 员 的 知识 储备 ， 因 为 社区 是 有 机 地 围绕 着 这 些 技术 而 发 展 的 。 最 后 ， 如 果 你 
选择 的 技术 既 灵 活 又 可 以 定义 这 染 生命 周期 、 事 件 接口 和 组 合 模式 的 话 ， 那 么 代码 的 质量 

会 显著 提高 ， 因 为 这 些 核心 UI 模式 会 定义 明确 的 标准 。 如 果 不 这 样 做 的 话 ， 整 个 公司 
的 工程 师 可 能 会 多 次 做 出 一 样 的 技术 选 型 ， 却 产 出 不 同 的 代码 设计 ， 这 会 导致 可 重用 性 与 
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整合 问题 ， 并 增加 开发 成 本 。 


类 似 的 示例 不 胜 枚 举 ， 但 如 果 将 解决 方案 和 决定 的 关 广 点 放 在 上 述 列 出 的 指导 原则 上 ， 就 
会 比 仅 仅 为 了 赶 时 此 而 追求 新 技术 的 潮流 要 好 得 多 。 


12.1.2 解决 方案 

正如 之 前 所 述 ， 沃 尔 玛 使 用 了 React 和 Node 来 解决 上 述 问 题 。 这 是 因为 这 些 技术 既 满足 
了 我 们 的 需求 ， 同 时 也 符合 吸引 和 留 住人 才 、 提 高 开发 效率 以 及 提高 代码 质量 的 目标 。 除 
了 能 够 解决 这 些 典 型 的 问题 外 ， 同 构 JavaScript 解决 方案 还 提供 了 以 下 支持 : 











。 SEO 支持 

。 单一 代码 库 

。 优化 页 面 加 载 

。 单一 技术 栈 与 演 染 生命 周期 


React 允许 我 们 在 多 个 地 方 轻松 共享 封装 好 的 UI 演 染 逻辑 (比如 组 件 )， 这 可 以 大 大 提高 
可 重用 性 以 及 组 件 的 质量 ， 因 为 多 地 共用 的 需求 让 组 件 变 得 更 为 强大 。 它 还 为 应 用 的 开发 
人 员 提 供 了 构建 Web 和 移动 端 原生 UI 的 通用 接口 。 更 重要 的 是 ，React 还 提供 了 一 个 很 
棒 的 组 合 模型 ， 社 区 也 已 经 定义 好 了 组 合 模 式 与 最 佳 实践 ， 例 如 ， 我 们 可 以 遵循 容器 组 件 
和 展示 组 件 的 模式 。 此 外 ， 虚 拟 DOM 算法 降低 了 重新 泻 染 整个 UI 的 成 本 ， 与 在 代码 中 手 
动 操作 DOM 节点 相 比 ， 这 简化 了 对 UI 状态 的 管理 。 最 后 ，React 社区 非常 活跃 ， 其 中 有 
很 多 用 于 构建 和 维护 应 用 的 支持 库 、 模 式 和 学 习 案 例 可 供 参 考 。 


12.2 React 模板 与 模式 


在 介绍 沃尔玛 采用 的 具体 做 法 之 前 ， 我 们 先 来 概述 一 个 同 构 React 应 用 的 通用 模板 与 
模式 。 






































设想 与 补充 信息 

下 列 的 代码 示例 假设 你 已 经 具备 了 React (https://facebook.github.io/react/)、 
JSX (https://facebook.github.io/react/docs/jsx-in-depth.html) 和 ES6 (http://es6- 
features.org/) 的 基础 知识 。 如 果 打 算 使 用 React 或 创建 同 构 React 应 用 ， 那 
么 网 上 已 经 有 很 多 案例 和 模板 项 目 可 以 帮助 你 入 门 。 














12.2.1 在 服务 器 并 这 
常规 方法 是 运行 一 个 Node 环境 的 Web 框架， 如 hapi (http://hapijs.com/) 或 者 Express 
(http://expressjs.com/) ， 并 调用 React 的 renderToString 方 法。 具体 的 做 法 可 以 是 这 种 做 法 
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的 变 体 ， 最 简单 的 形式 如 例 12-1 所 示 。 
例 12-1 以 字符 串 形式 浑 染 组 件 


import Hapi from 'hapi'; 

import React from 'react'; 

import { renderToString } from 'react-dom/server'; 
import htmL from './html'; 

import Hello from './hello'; 





class Hello extends React.Component { 


render() { 
return <div>Hello {this.props.text}!</div>; 
} 
} 
const server = new Hapi.Server({ 
debug: { 
request: ['error'] 
} 
]); 


server .Connection({ 
host: "LocaLhost ' ， 
port: 8000 

]); 


server .route({ 
method: 'GET', 
path: '/{42*}', 
handler: (request, reply) => { 
reply(html({ 
html: renderToString(<Hello text="World"/>) 
})); 
} 


有 


server .start((err) => { 
if (err) { 
throw err; 


} 


console.log('Server running at:', server.info.uri); 


}); 


来 自 Hello 组 件 的 HTML 字符 串 被 演 染 到 模板 ， 这 个 模板 会 作为 处 理 器 的 响应 返回 ， 如 例 
12-2 所 示 。 


例 12-2 HTML 文档 模板 


export default function (context) { 
return (` 
<htmL lang="en"> 
<head> 
<meta charSet="utf-8" /> 
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</head> 
<body> 
<div id="content">${context.html}</div> 
<!-- 
this would be a webpack or browserify bundle 
<script src="${context.js}"></script> 
- -> 
</body> 
</htmL> 
3 
} 


这 种 做 法 适用 于 静态 站 点 ， 而 静态 站 点 中 的 客户 端 组 件 不 需要 依赖 数据 。 要 想 确保 数据 能 够 
提供 给 客户 端 ， 需 要 在 服务 器 端 泻 染 时 对 需要 用 到 的 所 有 数据 进行 序列 化 (如 例 12-3 所 示 )。 


例 12-3 ”对 数据 进行 序列 化 (修改 例 12-1 中 的 handler) 


server.route({ 
method: 'GET', 
path: '/{42*}"', 
handler: (request, reply) => { 
// 数据 可 能 来 源 于 服务 、 数 据 库 等 
const data = { text: 'World' }; 
reply(html({ 
data: ‘window._ DATA = ${JSON.stringify(data)};，, 
html: renderToString(<Hello text={data.text} />) 
})); 
} 
]); 


数据 随后 连同 HTML 字符 串 一 起 传递 到 模板 中 ， 如 例 12-4 所 示 。 
例 12-4 带 有 数据 的 HTML 文档 模板 


export default function (context) { 
return ( 
<htmL lang="en"> 
<head> 
<meta charSet="utf-8" /> 
<script>${context.data}</script> 
</head> 
<body> 
<div id="content">${context.html}</div> 
<!-- 
this would be a webpack or browserify bundle 
<script src="${context.js}"></script> 
ab 
</body> 
</htmL> 
); 
} 


通常 而 言 ， 需 要 添加 的 下 一 个 新 功能 是 可 以 在 服务 器 端 和 客户 端 之 间 共 享 的 路 由 系统 。 这 
是 不 可 或 缺 的 ， 因 为 如 果 没 有 将 URL 映射 到 处 理 器 (在 这 个 示例 中 指 的 是 组 件 ) 的 方 





























be 
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式 ， 那 么 每 个 URL 都 会 返回 相同 的 响应 内 容 。 最 常见 的 路 由 系统 是 react-router (https:/ 
github.com/reactjs/react-router)， 因 为 它 是 为 React 而 设计 的 ， 且 本 身 也 是 一 个 React 组 件 。 
典型 的 用 法 是 用 react-router 中 的 match 函数 将 传 入 的 请 求 映射 到 路 由 ， 如 例 12-5 所 示 。 





例 12-5 在 服务 器 端 匹 配 路 由 
import Hapi from 'hapi'; 
import React from 'react'; 
import { renderToString } from 'react-dom/server'; 
import { match, RouterContext, Route } from "react-router ' ; 
import htmL from './html'; 


// 出 于 简洁 的 目的 ,省 略 部 分 代码 








const wrapper = (Component, props) => { 
return () => { 
return <Component {...props} /> 
} 
. 


server.route({ 

method: 'GET', 

path: '/{42*}', 

handler: (request, reply) => { 
// 数据 可 能 来 源 于 服务 、 数 据 库 等 
const data = { text: 'World' }; 
const location = request.url.path; 
const routes = ( 

<Route path="/" component={wrapper(Hello, data)} /> 

); 








match({routes, location}, (error, redirect, props) => { 
if (error) { 
// 演 染 500 页 面 
return; 


} 


if (redirect) { 
return reply.redirect('‘${redirect.pathname}${redirect.search}. ); 
} else if (props) { 
return reply(html({ 
data: ‘window._ DATA_ = ${JSON.stringify(data)};., 
html: renderToString(<RouterContext {...props} />) 


})); 
} 
Fs 
// 演 染 404 页 面 
return; 
} 
}); 





这 个 示例 引入 了 大 量 的 新 代码 ， 细 分 情况 如 下 。 
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。 wrapper 包 庄 国 数 负责 将 props 注入 到 react-router 的 路 由 处 理 器 中 。 

。 react-router 的 match 国 数 连同 path (location) 一 起 判断 是 否 存在 匹配 的 路 由 。 

。 props 的 存在 代表 匹配 到 了 路 由 ， 此 时 示例 中 的 RouterContext ( 即 Hello 组 件 包 庄 的 路 
由 控制 器 组 件 ) 会 被 泻 染 。 


对 代码 进行 模块 化 

在 现实 世界 中 ， 这 段 代 码 会 被 切 分 为 可 重用 的 多 个 模块 ， 以 便 在 客户 端 和 服 
务 器 端 之 间 共 享 。 为 了 保持 简化 的 状态 ， 这 段 代码 采用 了 单个 代码 块 /模块 
的 形式 。 








12.2.2 ”在 客户 端 恢复 

上 一 节 描 述 了 大 部 分 同 构 React 应 用 在 服务 器 端 演 染 时 执行 的 基本 步 台 。 虽 然 每 个 人 的 
实现 方式 可 能 略 有 不 同 ， 但 在 最 后 的 时 候 ， 包 含 了 React 组 件 树 演 染 出 的 标记 字符 捉 的 
HTML 文档 和 相关 的 数据 都 被 发 送 到 了 客户 端 。 接 下 来 由 客户 端 接手 服务 器 端 剩余 的 工 
作 。 在 同 构 React 应 用 中 ， 只 需 简单 地 调用 ReactDOM.render， 将 结果 演 染 到 服务 器 端 
renderToString 方法 注入 的 DOM 节点 位 置 中 即 可 〈 如 例 12-6 所 示 )。 


例 12-6 在 客户 端 演 染 
import React from "react '; 
import ReactDOM from 'react-dom’'; 

















class Hello extends React.Component { 
render() { 

return <div>Hello {this.props.text}!</div>; 
} 
} 


const props = window._DATA_ ; 


ReactDOM. render(<Hello {...props} />，document.getELementById('content ' ) ); 


客户 端 泻 染 与 服务 器 端 泻 S 

在 给 定 相同 数据 的 条 件 下 ， 组 件 的 render 方法 在 客户 端 和 服务 器 端的 return 
值 应 该 是 没有 区 别 的 。 如 果 存 在 区 别 ， 那 么 在 调用 ReactDOM.render 时 ， 
DOM 会 被 重新 演 染 ， 这 可 能 会 导致 性 能 问题 ， 同 时 也 会 降低 用 户 体验 。 要 
想 避 免 这 个 问题 ， 请 确保 在 给 定 路 由 的 条 件 下 ， 传 递 给 客户 端 和 服务 器 端的 
数据 是 一 致 的 。 




















例 12-6 将 会 重新 泻 染 组 件 树 ，ReactDOM.render 创建 出 的 虚拟 DOM 和 实际 的 DOM 中 的 所 
有 差异 都 将 被 修改 。 此 外 还 将 绑 定 所 有 的 事件 监听 颖 并 完成 其 他 工作 ， 详 情 请 参见 React 
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文档 (https://facebook.github.io/react/docs/react-component.html)。 当 使 用 react-router 时 ， 


前 面 的 原 到 





同样 适用 ， 如 例 12-7 所 示 。 





例 12-7 使 用 react-router 在 客户 端 演 染 
import React from 'react'; 


import ReactDOM from 'react-dom'; 
import { Router, browserHistory } from 'react-router' 


class Hello extends React.Component { 
render() { 
return <div>Hello {this.props.text}!</div>; 


} 
} 


const wrapper = (Component, props) => { 
return () => { 
return <Component {...props} /> 


} 
} 


const props = window._DATA_ ; 
const routes = ( 
<Route path="/" component={wrapper(Hello, props)} /> 


); 


ReactDOM. render(<Router history={browserHistory} routes={routes} />， 
document.getElementById('content')); 


这 个 实现 非常 棒 ， 因 为 路 由 现在 可 以 在 客户 端 和 服务 器 端 之 间 共 享 了 。 最 后 一 步 是 确保 


任意 的 rehydrated 数据 都 可 以 传递 到 组 件 中 。 通 常 来 说 ， 包 右 层 或 者 提供 层 组 件 负 责 处 理 





组 件 树 的 数据 ， 如 react-solver (https://github.com/ericclemmons/react-resolver)、async- 
props (https://github.com/ryanflorence/async-props) 和 Redux (http://redux.js.org/) 等 。 选 用 
wrapper 的 目的 和 我 们 在 服务 器 端的 做 法 保持 了 一 致 ， 都 是 出 于 简化 的 考虑 。 


虚拟 DOM 与 校 验 和 

当 render 方法 被 调用 时 ，React 使 用 虚拟 DOM (https://facebook.github.io/ 
react/docs/glosary.html) 来 表示 组 件 泻 染 树 。 虚 拟 DOM 用 于 和 真实 DOM 
进行 比较 ， 二 者 的 差异 将 会 被 修补 。 因 此 ， 当 ReactDOM.render 在 客户 端 被 
调用 时 ， 除 了 事件 监听 器 需要 绑 定 外 ， 两 者 不 应 该 有 任何 差异 。React 使 用 
data-react-checksum 属性 来 实现 这 项 机 制 ， 我 们 将 在 12.4.2 节 中 对 此 作 更 详 
细 的 介绍 。 























以 上 的 步骤 可 以 快速 构建 一 个 简单 的 同 构 React 应 用 。 如 你 所 见 ， 这 些 步 骤 可 以 轻松 
ea 其 中 的 一 些 步骤 是 合并 的 或 隐 仿 出现 的 〈 例 如 ， 
ReactDOM.render 绑 定 了 事件 监听 器 并 创建 了 控制 器 实例 ) 。 
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12.3 沃尔玛 采用 的 方法 


沃尔玛 对 12.2 布 中 的 实现 作出 了 一 些 修改 。 主 要 的 区 别 是 ， 我 们 没有 在 首 屏 页 面 加 载 后 过 
渡 到 SPA 模式 ， 原 因 是 这 属于 优化 项 。 对 最 小 可 行 产品 (minimal viable product，MVP) 
和 walmart.com 的 完全 迁移 而 言 ， 这 并 不 是 必需 的 ， 而 且 这 也 不 是 我 们 主要 目标 的 一 部 分 
(参见 12.1.1 节 )。 然 而 ， 我 们 还 是 在 客户 端 执 行 了 序列 化 和 rehydrate。 从 更 高 层次 来 看 ， 
当 服务 器 端 匹 配 到 路 由 时 ， 则 会 进行 以 下 这 些 环 闻 。 


。 响应 路 由 子 集 的 一 个 应 用 会 被 初始 化 。 

。 应 用 创建 一 个 redux (http://redux.js.org/) store， 触 发 引导 操作 ， 向 store 提供 响应 请 求 
所 需要 的 数据 。 

。 react-router (https://github.com/ReactTraining/react-router) 匹配 特定 的 路 由 。 

。 react-dom/server 模块 的 renderToString 方法 使 用 了 redux store 和 其 他 数据 ， 匹 配 的 
路 由 随后 使 用 这 个 方法 进行 泻 染 

。 响应 连同 序列 化 后 的 redux store 数据 一 同 发 送 到 客户 端 。 


在 客户 端 中 的 环节 如 下 。 


。 客户 端 使 用 服务 器 端 传 来 的 序列 化 数据 对 redux store 进行 初始 化 。 
。 应 用 (一 个 React 的 provider/wrapper 组 件 ) 和 react-router 调用 react-don 模块 的 
render 方法 。 






































看 起 来 挺 简单 的 ， 对 吧 ? 从 更 高 层次 来 看 或 许 如 此 ， 但 在 实际 中 会 遇 到 很 多 挑战 。 我 们 将 
在 下 一 节 中 强调 其 中 的 一 些 挑战 。 


12.4 ”克服 挑战 


万 事 开头 难 。 








Jason Strimpel 


无 论 你 多 么 有 天 分 或 前 期 准备 得 多 么 充分 ， 你 还 是 难免 会 犯错 ， 那 些 精 心 设计 和 执行 计 
划 还 是 会 出 现 差 错 与 未 知情 况 。 关 键 在 于 你 将 如 何 应 对 这 些 挑 成 。 从 Java 和 Backbone + 
Handlebars 迁移 到 React 和 Node 的 过 程 中 ， 沃 尔 玛 遇 到 了 许多 挑 成 ， 未 来 也 将 如 此 。 接 下 
来 我 们 将 概述 其 中 一 个 挑战 。 


12.4.1 首 字 节 时 间 
在 准备 迁移 到 React 时 ， 我 们 很 快 就 发 现 首 字 节 时 间 (Time to First Byte，TTFB) 比 不 
上 现 有 的 应 用 。 服 务 器 端的 CPU 性 能 分 析 显 示 ， 大 部 分 时 间 花 费 在 了 ReactDoMServer 的 
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renderTostring 代码 上 面 ， 用 于 在 服务 器 端 泻 当 初始 标记 。 














首 字 节 时 间 是 衡量 Web 应 用 服务 器 性 能 的 一 种 标准 方法 。 正 如 其 名 称 所 示 ， 
该 指标 就 是 指 浏览 器 接收 页 面 首 个 字 节 所 花费 的 时 间 。 较 长 的 首 字 节 时 间 意 
味 着 应 用 服务 器 需要 花费 很 长 一 段 时 间 来 处 理 请 求 并 生成 响应 。 








事实 证 明 ， 当 页 面包 含 多 个 虚拟 DOM 节点 时 ，React 的 服务 器 端 渲染 会 成 为 性 能 瓶颈 。 
在 大 型 的 页 面 中 ，ReactDOMServer.renderToString(..) 方 法 会 独占 CPU， 阻 塞 Node 的 
事件 循环 ， 并 影响 传人 服务 器 的 其 他 请 求 。 这 是 因为 每 个 页 面 请 求 都 需要 稼 染 整个 页 面 ， 
甚至 包括 那些 给 定 相 同属 性 就 会 返回 相同 标记 的 细 粒 度 组 件 。 如 果 每 个 页 面 请 求 都 重新 
演 染 相同 组 件 的 话 ， 那 么 就 会 浪费 大 量 的 CPU 时 间 。 得 出 的 结论 是 ， 要 想 在 我 们 的 项 目 
中 使 用 React， 那 么 就 需要 对 框架 层面 进行 一 些 基础 性 的 修改 ， 以 减少 在 服务 器 端 重新 浑 
染 需要 的 时 间 。 


12.4.2 ”组 件 泻 染 优化 


我 们 决定 为 CPU 时 间 腾 出 空间 ， 为 此 采用 了 两 种 很 棒 的 技术 : 组 件 缓存 化 和 组 件 模板 化 。 


1. 组 件 缓存 化 

我 们 直觉 上 知道 ， 在 给 定 相 同属 性 的 情况 下 ， 纯 组 件 总 是 会 返回 相同 的 HTML 标记 。 与 
函数 式 编程 中 的 纯 函 数 概念 类 似 ， 纯 组 件 就 是 属性 的 函数 ， 这 意味 着 在 首次 泻 染 过 后 ， 
我 们 可 以 将 泻 染 的 结果 记忆 (缓存 ) 起 来 ， 以 达到 有 效 提高 演 染 速度 的 效果 。 因 此 问题 
变 成 了 ， 我 们 能 否 避 免 重新 泻 染 传 入 相同 属性 的 相同 组 件 ， 以 优化 React 在 服务 器 端的 
演 染 时 间 ? 


剖析 了 React 代码 之 后 ， 我 们 发 现 React 有 一 个 mountComponent 函数 。 组 件 的 HTML 标记 就 是 
在 这 里 生成 的 。 我 们 知道 ， 如 果 可 以 通过 require 钩子 拦截 React 的 instantiateReactComponent 
模块 ， 那 么 我 们 就 不 需要 fork React， 而 是 可 以 直接 注入 缓存 优化 逻辑 了 。 例 12-8 是 注入 的 组 
存 优 化 的 一 个 简化 版 本 。 







































































例 12-8 使 用 require 钩子 在 服务 器 端 缓存 组 件 


const InstantiateReactComponent = require("react/lib/instantiateReactComponent"); 


const WrappedInstantiateReactComponent = _.wrap(InstantiateReactComponent, 
function (instantiate) { 
const component = instantiate.apply( 
instantiate, [].slice.call(arguments, 1)); 
component._instantiateReactComponent = WrappedInstantiateReactComponent; 
component .mountComponent = _.wrap( 
Component .mountComponent， 
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function (mount) { 
const cacheKkey = config.components[cmpName] .keyFn( 
component._currentElement.props); 
const rootID = arguments[1]; 
const cached0bj = lruCache.get(cachekKey); 
if (cachedobj) { 
return cached0bj.markup.repLace( 
new RegExp('data-reactid="' + cached0bj.rootId，"g")，data-reactid= 
rootID); 


nm 


在 


} 
const markup = mount.appLy( 

component, [].slice.call(arguments, 1)); 
lruCache.set(cacheKey, { 

markup: markup, 

rootId: rootID 


}3 


return markup; 
]); 
} 


return component; 


}>; 


Module.prototype.require = function (path) { 
const m = require_ .apply(this, arguments); 


if (path === "./instantiateReactComponent") { 
return WrappedInstantiateReactComponent; 
} 
return m; 
}; 





如 你 所 见 ， 我 们 使 用 了 一 个 LRU 缓存 (Least Recently Used， 最 近 最 少 使 用 ) 来 存储 已 这 
染 组 件 的 标记 (适当 赫 代 了 data-reactid 属性 )。 由 于 不 仅 想 要 实现 某 个 接口 ， 还 需要 获 
得 缓存 任何 纯 组 件 的 能 力 ， 因 此 我 们 创建 了 一 个 可 配置 的 组 件 缓存 库 ， 以 接收 一 个 包含 组 
件 名 称 的 对 象 ， 并 传递 给 cacheKeyGenerator 函数 ， 如 例 12-9 所 示 。 


例 12-9 可 配置 的 组 件 缓存 库 


var componentCache = require("@walmart/react-component-cache"); 





var cacheKeyGenerator = function (props) { 
return props.id + ":" + props.name; 


拱 


var componentCacheRef = componentCache({ 
components: { 
'Component1': cacheKeyGenerator, 
"Component2 ' : cacheKeyGenerator 
}， 
lruCacheSettings: { 
// LRU 缓存 配置 项 , 见 下 文 
} 
]); 





通过 指定 组 件 名 称 并 引用 cacheKeyGenerator 国 数 ， 应 用 的 所 有 者 可 以 配置 这 个 缓 在 。 这 
个 函数 返回 一 个 字符 串 以 表示 所 有 传 入 的 组 件 泻 染 ， 并 将 该 字符 串 用 作 优 化 泻 染 的 缓存 
键 。 当 后 续 的 组 件 泻 染 碰 到 相同 的 名 称 时 ， 将 会 命中 缓存 并 返回 缓存 的 结果 。 


使 用 React 的 最 初 目的 就 是 在 不 同 的 页 面 和 应 用 之 间 重用 组 件 ， 所 以 我 们 已 经 拥有 了 一 套 
可 重用 的 纯 组 件 以 及 定义 明确 的 接口 。 在 给 定 相同 属性 时 ， 这 些 纯 组 件 总 是 会 返回 相同 的 
结果 ， 且 该 结果 不 依赖 于 应 用 的 状态 。 正 因 如 此 ， 我 们 可 以 使 用 这 里 所 示 的 可 配置 组 件 缓 
存 代码 ， 以 便 缓存 页 面 的 全 局 页 眉 、 页 脚 中 的 大 部 分 组 件 ， 且 无 须 修改 组 件 代码 本 身 。 


2. 组 件 模板 化 

上 述 的 解决 方案 已 经 达到 了 减少 部 分 服务 器 端 CPU 资源 消耗 的 目的 。 但 我 们 想 要 深化 这 
种 缓存 优化 机 制 ， 通 过 组 件 模板 化 允许 缓存 的 浑 染 标 记 可 以 包含 更 多 的 动态 数据 。 虽 说 纯 
组 件 本 应 总 是 这 染 相同 的 标记 结构 ， 但 某 些 属性 应 该 比 其 他 属性 更 加 动态 化 。 例 12-10 中 
这 个 简单 的 React 商品 组 件 就 是 一 个 很 好 的 示例 。 



































例 12-10 React 商品 组 件 


var React = require('react'); 


var ProductView = React.createClass({ 
render: function() { 
var disabled = this.props.inventory > 0?'' : 'disabled'; 


return ( 
<div className="product"> 

<img src={this.props.product.image}/> 

<div className="product-detail"> 
<p className="name">{this.props.product.name}</p> 
<p className="description">{this.props.product.description}</p> 
<p className="price">Price: ${this.props.selected.price}</p> 
<button type="button" onClick={this.addToCart} disabled={disabled}> 


{this.props.inventory ? 'Add To Cart' : 'Sold Out'} 
</button> 
</div> 
</div> 
); 
} 
]); 


module.exports = ProductView; 




















这 个 组 件 接收 的 属性 包括 商品 图 片 、 名 称 、 描 述 以 及 价格 。 如 果 按 照 前 面 所 述 的 方式 来 缓 
存 组 件 ， 那 么 就 需要 一 个 足够 大 的 缓存 来 容纳 所 有 的 商品 。 此 外 ， 访 问 量 较 少 的 商品 更 可 
能 遇 到 缓存 未 命中 的 情况 。 这 就 是 需要 添加 组 件 模板 化 功能 的 原因 。 该 功能 需要 将 属性 分 
为 两 组 。 
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模板 属性 


这 是 可 以 被 模板 化 的 属性 。 例 如 ， 在 <Link> 标签 中 ，urt 和 Labet 就 是 模板 属性 ， 因 为 
对 不 同 的 url 和 label 值 来 说 ， 标 记 的 结构 不 会 发 生变 化 。 














缓存 键 属性 











这 是 指 会 影响 泻 染 后 的 标记 结构 的 属性 。 比 如 ， 商 品 的 availabilitystatus 属性 会 
影响 结果 标记 (例如 ， 随 显示 的 价格 生成 的 按钮 可 能 是 “添加 到 购物 车 ”或 者 “到 





货 提醒 ”)。 














可 以 在 组 件 缓存 库 中 配置 这 些 属性 ， 但 此 时 不 能 只 提供 cacheKeyGenerator 函数 了 ， 你 需 








要 传递 templateAttrs 和 keyAttrs (如 例 12-11 所 示 )。 


例 12-11 包含 template 和 key 属性 的 可 配置 组 件 缓存 库 
"Use strict"; 


// 可 用 于 模板 化 的 实例 组 件 缓存 


var componentCache = require("@walmart/react-component-cache"); 


var componentCacheRef = componentCache({ 
components: { 
"ProductView": { 


templateAttrs: ["product.image", "product.name", "product.description", 


"product.price"], 
keyAttrs: ["product.inventory"] 
5 
"ProductCallToAction": { 
templateAttrs: ["url"], 


keyAttrs: ["availabilityStatus", "isAValidoffer", "maxQuantity", 
"preorder", "preorderInfo.streetDateType", "puresoi", 


"variantTypes", "variantUnselectedExp" 
] 
} 


} 
}); 


注意 ，ProductView 的 模板 属性 全 部 都 是 动态 属性 ， 且 对 每 个 商品 都 是 不 同 的 。 在 这 个 示 








例 中 ， 我 们 还 将 属性 product .inventory 作为 一 个 缓存 键 ， 
量 而 变化 ， 以 启用 “添加 到 购物 车 ”按钮 。 








大 








为 标记 会 根据 库存 的 具体 数 





配置 好 模板 属性 后 ， 相 应 的 属性 会 在 React 组 件 谊 染 周 期 中 变化 为 模板 分 隔 符 〈 即 ${ prop_ 
name })。 随 后 模板 被 编译 、 缓 存 、 执 行 ， 并 交 给 React 作为 标记 的 备份 。 缓 存 键 属性 用 于 
缓存 模板 。 对 于 后 续 的 请 求 而 言 ， 组 件 的 谊 染 会 执行 短路 逻辑 ， 调 用 一 个 已 经 编译 过 的 模 
板 。 例 12-12 展示 了 一 个 带 有 模板 属性 和 模板 分 隔 符 的 组 件 缓存 库 。 











例 12-12 ”支持 模板 化 的 组 件 缓存 库 
Component .mountComponent = _.wrap( 
component .mountComponent ， 
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function (mount) { 
const cacheKey = 
const rootID = arguments[1]; 
// 迭代 配置 后 的 模板 属性 
// 并 设置 属性 的 模板 分 隔 符 
templateAttrs.forEach((attrKey) => { 
const _attrKey = attrkey.replace(".", "_"); 











templateAttrValues[_attrKey] = ~ Getto EL robe, attrkey); 


_.Sset(cuyrEl.props, attrKey, "${" + _attrkey + "}"); 
有 3 
const cached0bj = LruCache.get(cacheKkey ) ; 
if (cached0bj) { 
const cacheMarkup = restorePropsAndProcessTempLate( 
cached0bj .compiled, 
templateAttrs, 
templateAttrValuyues, 
curEl.props); 
return cacheMarkup.replace( 


new RegExp('data-reactid="' + cached0bj.rootId, "g"), 


'data-reactid="' + rootID); 


} 


const markup = mount.apply(component, [|].slice.call(arguments, 1)); 


const compiledMarkup = _.template(markup); 

self.lruCache.set(cacheKey, { 
compiled: compiledMarkup, 
rootId: rootID 

]); 

return restorePropsAndProcessTempLate( 
compiledMarkup, 
templateAttrs, 
templateAttrValuyues, 
curEl.props); 

}); 


restorePropsAndProcessTemplate(..) 国 数 接收 模板 属性 ， 设 置 属 





模板 编译 。 


const restorePropsAndProcessTempLate = ( 
compiled, templateAttrs, templateAttrValues, props 
) =>{ 
tempLateAttrs.forEach((attrKey) => { 
const _attrKey = attrkKey.replace(".", "_"); 
.Set(props，attrKey， templateAttrValues[ attrKey]); 
]); 
return compiled(templateAttrValues); 
}; 


12.4.3 性 能 提升 


前 过 应 用 缓存 化 和 模板 化 的 优化 方案 ， 可 以 将 请 求 的 平均 时 间 











性 键 值 ， 并 用 属性 值 执 行 











缩短 40%， 而 且 95% 的 请 
求 效率 可 以 提升 近 50%。 这 些 优化 可 以 为 我 们 的 Node 服务 器 释放 更 多 的 事件 循环 ， 并 使 














得 Node 可 以 专注 于 其 最 擅长 的 异步 数据 请 求 。 我 们 取得 了 以 


7 











成 果 : 每 次 的 页 面 请 求 占 
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用 更 少 的 CPU 时 间 ， 且 renderTosString(..) 阻塞 的 并 发 请 求 数 减少 。 如 图 12-2 所 示 ， 在 
优化 后 ， 服 务 器 端 请 求 的 CPU 概况 看 起 来 会 好 得 多 。 
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图 12-2: 优化 前 后 的 CPU 概况 对 比 


如 果 高 亮 显示 所 有 缓存 的 标记 并 返回 一 个 示例 页 面 ， 那 么 看 起 来 就 如 图 12-3 所 示 那 样 〈 阴 
影 区 域 就 是 在 服务 器 端 缓存 的 标记 ) 。 


值得 重点 说 明 的 是 ， 我 们 还 尝试 使 用 了 一 些 其 他 的 项 目 来 解决 React 的 服务 器 端 演 染 瓶 
有 颈 , 例如 react-dom-stream (https://github.com/aickin/react-dom-stream) 和 react-server 
(https://github.com/redfin/react-server) 这 两 个 项 目 就 试图 通过 异步 演 染 React 页 面 来 代 
替 同 步 的 ReactDOM.renderToString 方法 。 赫 代 同 步 泻 染 过 程 后 ， 流 式 的 React 演 染 允许 
服务 器 端 响 应 其 他 的 并 发 请 求 。 流 式 的 初始 HTML 标记 还 可 以 让 浏览 器 更 早 地 开始 绘制 
页 面 ( 而 无 须 等 到 整个 响应 返回 )。 这 些 方式 有 助 于 提高 用 户 对 性 能 的 感知 ， 因 为 内 容 可 
以 更 快 地 在 屏幕 上 绘制 出 来 。 然 而 ， 总 体 的 CPU 时 间 不 会 因此 而 减少 ， 因 为 无 论 采 用 同 
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步 还 是 异步 的 方式 ， 在 服务 器 端 需要 完成 的 工作 量 是 不 变 的 。 相 比 之 下 ， 组 件 的 缓存 化 和 
模板 化 就 可 以 减少 总 体 的 CPU 时 间 ， 因 为 后 续 的 请 求 将 不 再 需要 重新 这 染 相 同 的 组 件 。 这 
些 泻 染 优化 可 以 连同 其 他 的 性 能 优化 方案 一 同 使 用 ， 其 中 就 包括 异步 泻 染 











Home > Furniture > Bedroom Fumiture > Bedroom Sets 


Home Styles American Craftsman Furniture 
Collection 
TT 人 [1 TT 


pil Hy 


¥ ee 


:186"- 862 
es 2250 oe stm [ER 
Home Styles Modern Craftsman Distressed Oak TV Stand Home ss s Modern Craftsman Distressed Oak Gaming Tower 


IS CK Home Styles Modern Craftsman Student Desk and Hutch 


ES | 122 
Was $130.49 Save $7.50 
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图 12-3: 优化 后 的 示例 页 面 (阴影 区 域 表 示 缓 存 的 标记 ) 


12:5” 下 一 步 
接 下 来 将 继续 在 沃尔玛 中 查找 并 修复 性 能 瓶 开 ， 其 中 包括 我 们 在 12.4 节 中 讨论 到 的 那些 问 
题 。 准 备 好 解决 这 些 问题 后 ， 我 们 就 将 正式 实现 同 构 并 利用 SPA 模型 来 处 理 后 续 的 请 求 。 
最 后 ， 对 这 一 切 进行 开源 ! 
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12.6 感谢 


如 果 经 历 过 类 似 的 转变 过 程 ， 那 么 你 就 会 明白 这 并 不 容易 ， 特 别 是 对 沃尔玛 这 样 的 大 公司 
而 言 。 除 了 技术 和 规模 上 的 挑战 以 外 ， 组 织 、 文 化 以 及 资源 等 方面 也 面临 重大 挑战 。 好 
在 团队 间 的 协作 、 构 想 、 领 导 力 都 非常 不 错 。 所 有 成 果 是 公司 多 个 团队 共同 努力 的 结果 ， 
但 我 们 想 要 特别 感谢 沃尔玛 实验 室 的 领导 对 此 的 投资 。 我 们 还 要 特别 感谢 Alex Grigoryan 
(https:/www.linkedin.com/in/alexgrigoryan/) 支持 我 们 编写 本 章 的 内 容 ， 让 我 们 可 以 分 享 
他 负责 的 产品 作出 的 转变 。 最 后 ， 我 们 想 要 感谢 Jack Herrington (https://www.linkedin. 
com/in/jherr/) ， 感 谢 他 对 我 们 的 激励 以 及 他 本 人 的 所 有 开创 性 工作 。 我 们 永远 不 会 忘记 他 
的 贡献 。 


12.7 ”补充 说 明 

我 们 很 末 幸 能 够 在 沃尔玛 的 变化 之 旅 中 贡献 出 自己 的 一 份 力 量 。 至 少 从 我 们 的 角度 来 
看 ， 最 好 的 地 方 是 这 个 旅程 才刚 刚 开始 ， 这 意味 着 工程 师 还 有 很 多 机 会 来 创建 更 好 的 解 
决 方案 ， 以 便 解 决 更 多 难题 。 因 此 ， 如 果 你 也 济 望 挑战 ， 我 们 强烈 推荐 你 考虑 一 下 沃 尔 
玛 实验 室 的 工作 机 会 。 最 后 ， 请 记得 在 Twitter 上 关注 @walmartlabs (https://twitter.com/ 
WalmartLabs)， 留 意 我 们 的 GitHub 组 织 账号 (https://github.com/walmartlabs)， 并 持续 关 
注 沃 尔 玛 实验 室 技术 博客 (https://medium.com/walmartlabs)， 我 们 将 会 向 社区 分 享 更 多 旅 
途中 的 细节 与 代码 ! 
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第 13 章 


全 栈 Angular 





Jeff Whelpley 
我 是 在 2012 年 12 月 加 入 的 GetHuman。 我 的 第 一 项 任务 非常 有 趣 ， 需 要 想 办 法 建立 一 个 
丰富 的 、 实 时 的 、 流 行 的 旗舰 网 站 https:Wgethuman.com/。 从 本 质 上 来 说 ， 我 需要 寻找 方法 
将 两 项 (在 当时 ) 并 不 常见 的 要 素 结合 起 来 。 





() 一 个 客户 端 JavaScript Web 应 用 。 
(2) 一 个 SEO 友好 的 、 性 能 驱动 型 的 网 站 。 


虽然 对 上 述 每 个 单独 的 点 都 有 着 丰富 的 经 验 ， 但 我 从 未 党 试 过 将 它们 灶 合 到 一 起 。 在 那 时 
候 ， 解 决 这 些 需求 的 方案 通常 可 以 归结 为 类 似 于 Rails 的 实现 或 是 基于 无 界面 浏览 器 的 实 
现 ， 但 这 两 种 方式 都 有 明显 的 缺点 。 


Rails 的 实现 包括 建立 服务 器 端的 网 址 ， 并 在 不 同 的 页 面 中 加 上 少量 的 JavaScript。 虽 然 
这 种 方式 在 SEO 和 性 能 方面 表现 出 色 ， 但 无 法 借助 它 来 利用 客户 端的 一 些 高 级 功能 。 此 
外 ， 这 个 解决 方案 好 像 更 适用 于 构建 传统 的 网 站 ， 这 显然 并 不 是 我 们 想 要 的 。 我 们 想 要 
的 是 快速 的 、 响 应 式 的 、 流 畅 的 用 户 体验 ， 通常 只 能 使 用 客户 端 驱 动 的 SPA 才能 实现 这 
一 目的 。 












































男 一 方面 ， 一 些 应 用 是 完全 基于 客户 端 构 建 的 ， 这 些 应 用 使 用 Backbone、Angular、Ember 
或 者 是 纯 原 生 的 JS。 要 想 让 客户 端 应 用 可 以 被 搜索 引 获 收录， 你 需要 使 用 PhantomJS 这 样 
的 无 界面 浏览 器 来 缓存 客户 端 应 用 视图 的 快照 。 虽 然 这 种 做 法 可 以 解决 问题 ， 但 使 用 无 界 
面 浏览 器 会 带 来 两 个 大 问题 。 
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(D 运行 过 慢 。 


(2) 对 于 像 GetHuman 这 样 包含 了 成 百 上 千 个 页 面 的 网 站 来 说 ， 这 会 消耗 太 多 资源 。 














这 两 种 方式 显示 都 不 太 适 合 我 们 。 那 么 我 们 该 怎么 办 呢 ? 


13.1 同 构 JavaScript: Web 应 用 的 未 来 


在 尝试 了 用 不 同 的 客户 端 / 服 务 器 端 方案 来 满足 我 们 的 需求 后 ， 我 偶然 发 现 了 Spike Brehm 
的 文章 “Isomorphic JavaScript: The Future of Web Apps” (http://nerds.airbnb.com/isomorphic- 
javascript-future-web-apps/) , 该 文章 讲述 了 作者 在 Airbnb 中 实现 了 一 种 新 的 Web 开发 方式 : 
同 构 JavaScript。Spike 在 其 中 写 下 了 如 下 内 容 。 





归根 结 底 ， 我 们 真正 想 要 的 是 将 新 旧 两 种 方式 结合 起 来 : 既 要 从 服务 器 端 生成 完 
整 的 HTML 以 满足 性 能 和 SEO 需要 ， 又 要 兼顾 客户 痛 应 用 逻辑 的 速度 与 灵活 性 。 
为 此 ， 我 们 在 Airbnb 尝试 了 “ 同 构 JavaScript” 应 用 ， 这 意味 着 JavaScript 应 用 可 
以 同时 在 客户 端 与 服务 器 端 运行 。 


这 正 是 我 们 一 直 在 寻找 的 答案 ! Spike 完美 地 阐释 了 我 一 直 以 来 无 法 完全 归纳 出 的 想法 ， 
也 是 我 们 在 2013 年 花 了 大 半年 时 间 在 寻找 的 东西 。 


不 过 还 有 一 个 问题 。 














从 概念 上 来 说 ， 我 完全 认同 Spike 的 观点 ， 但 他 使 用 的 基于 Backbone 的 具体 解决 方案 并 
不 是 我 想 要 的 。 虽 然 对 Backbone 非常 熟悉 ， 但 我 更 倾向 于 使 用 一 个 相对 较 新 的 框架 
Angular.js。 因 此 ， 为 何 我 不 将 Angular 改造 为 同 构 的 呢 ? 就 像 Spike 将 Backbone 改造 为 同 
构 的 那样 。 

















如 果 对 Angularjs 有 所 了 解 ， 那 么 你 应 该 知道 这 说 起 来 容易 ， 做 起 来 难 。 











13.2 同 构 Angular 1 


为 了 在 Backbone 上 实现 服务 器 端的 演 染 ，Spike 创建 了 一 个 完全 独立 的 库 ， 并 将 其 命名 为 
Rendr (https://github.com/rendrjs/rendr)。 他 没有 对 现 有 的 Backbone 库 作 出 任何 修改 。 我 对 
Angular 也 采取 了 类 似 的 做 法 。 与 Backbone 类 似 ，Angular 和 DOM 也 是 紧 耦 合 的 。 因 此 ， 
在 服务 器 端 实现 泻 染 的 方法 只 有 两 种 ， 要 么 对 所 有 的 客户 端 对 象 (如 window 和 browser) 
提供 shim， 要 么 就 创建 一 套 高 层次 的 API， 以 便 应 用 逻辑 可 以 基于 此 进行 编写 。 我 们 选择 
了 前 者 ， 这 就 要 求 我 们 基于 Angular 构建 一 层 抽象 ， 类 似 于 Rendr 与 Backbone 的 工作 模式 。 














经 过 一 年 多 的 试验 、 测 试 与 迭代 ， 我 们 终于 获得 了 一 套 优雅 的 解决 方案 。 
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与 Rendr 类 似 ， 我 们 创建 了 一 个 名 为 Jangular (https://github.com/gethuman/jangular) 的 库 ， 
从 而 可 以 在 服务 器 端 演 染 Angular 编写 的 Web 应 用 。 新 版 的 GetHuman.com 网 站 几乎 可 以 
在 服务 器 端 瞬 间 泻 染 出 视图 ， 其 至 在 重负 荷 情 况 下 也 是 如 此 。Angular 客户 端 在 几 秒 后 接 
管 页 面 ， 向 用 户 提供 几 个 实时 功能 。 我 们 认为 自己 已 经 解决 了 服务 器 端 演 染 的 难题 ! 



































但 我 们 的 Angular 1 服务 器 端 演 染 解决 方案 其 实 仍然 存在 一 些 问题 。 








(1) Jangular 只 支持 Angular 功能 的 一 个 子 集 。 虽 然 扩 展 Jangular 比较 容易 ， 但 我 们 决定 刚 
开始 只 支持 GetHuman.com 网 站 需要 用 到 的 那 部 分 Angular 功能 。 

(2) Jangular 遵循 严格 的 规则 ， 其 中 包括 特定 的 文件 夹层 次 结构 、 文 件 命名 规则 以 及 代码 结 
构 标 准 。 

换 句 话说， 我 们 创建 的 解决 方案 可 以 完美 地 使 用 于 自己 的 场景 ， 但 它 很 难 被 其 他 人 所 

使 用 。 



































ng-conf 2015 


在 Jangular 被 创建 出 来 的 几 个 月 之 后 ， 我 受 邀 到 ng-conf 进行 演讲 ， 介 绍 我 们 的 Angular 1 
服务 器 端 渲染 方案 。 在 会 议 之 前 ，Google Angular 团队 的 技术 领导 Igor Minar 审核 了 我 的 
PPT“Isomorphic Angular”， 并 告诉 我 等 Angular 2 诞生 后 ， 我 尝试 做 的 事情 就 会 变 简 单 很 
多 。 那 时 我 并 没有 十 分 理解 他 说 的 话 ， 但 他 对 我 说 ， 他 们 在 Angular 2 中 创建 了 抽象 层 ， 
使 得 Angular 2 应 用 无 论 在 客户 端 、 服 务 器 端 或 其 他 地 方 都 可 以 轻松 地 进行 泻 染 。 因 此 ， 
我 在 ng-conf 演讲 的 最 后 简单 地 提 及 了 在 Angular 2 核心 中 加 入 服务 器 端 演 染 的 可 能 性 。 当 
时 我 是 这 么 说 的 : 












































我 认为 ， 在 Angular 2 中 使 用 这 个 新 功能 (不 管 是 由 我 来 实现 ， 还 是 由 很 多 对 此 
感 兴趣 的 其 他 开发 者 来 实现 ) ， 并 通过 我 提供 的 一 些 其 他 功能 来 创建 一 个 相当 酷 炫 
的 、 大 家 都 可 以 使 用 的 同 构 解 决 方案 ， 这 一 切 只 是 时 间 问 题 。 





在 演讲 结束 后 ， 我 遇见 了 Patrick Stapleton (网 名 PatrickJS)。 和 我 一 样 ， 他 对 同 构 
JavaScript 也 很 感 兴趣 。 结 合 我 们 的 想法 并 经 过 共同 努力 之 后 ，Patrick 将 Angular 2 服务 器 
端 泻 染 变 成 了 现实 。 








这 没有 花费 我 们 很 长 时 间 。 在 ng-conf 结束 的 一 周 后 ，Patrick 就 取得 了 一 定 程度 的 突破 
(如 图 13-1 所 示 ) 。 
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PatrickJS 
国生 + EE 
jeffwhelpley yo, | got Server-Side rendering 


working with Angular2 ;-) isomorphic Angular 2 
is now a thing 


RETWEETS LIKES FE -7 
53 57 令 国 准 网 酉 国 有恒 外 国 
10:58 PM - 19 Mar 2015 


只 ey 镶 ooo 











13-1: 同 构 Angular 2 1 





在 和 Angular 社区 的 开发 者 及 核心 团队 成 员 进 行 了 一 番 讨 论 之 后 ，Angular 团队 的 负责 
Brad Green 将 我 们 和 Angular 2 演 染 架构 的 策划 者 Tobias Bosch 组 织 到 一 起 。 我 们 三 方 开始 
共同 工作 。 


13.3 Angular 2 服务 器 端 泻 染 


三 个 月 之 后 ， 我 们 建立 了 一 个 可 用 原型 ， 并 对 Angular 2 的 泻 染 架构 也 有 了 更 深入 的 了 解 。 
在 2015 年 6 月， 我 们 在 AngularU 介绍 了 Angular 2 服务 器 端 演 染 解决 方案 。 














你 可 以 在 YouTube (https://www.youtube.com/watch?v=0wvZ7gakqV4) 上 观看 此 次 演讲 。 


下 面 是 本 次 演讲 的 总 结 。 


13.3.1 服务 器 端 泻 染 的 用 例 
下 列 的 每 个 用 例 都 可 以 回答 这 个 问题 : 为 什么 服务 器 端 泻 染 对 你 的 客户 端 Web 应 用 很 
重要 ? 


感知 加 载 时 间 
通常 而 言 ， 客 户 端 Web 应 用 的 初始 加 载 速度 都 非常 慢 。Filament Group 近期 发 布 的 一 份 
研究 (https://www.filamentgroup.com/lab/mv-initial-load-times.html) 表明 ， 一 个 简单 的 
Angular 1x 应 用 在 移动 端 设备 上 的 初始 页 面 加 载 时 间 平 均 为 3~4 秒 。 对 更 加 复杂 的 应 用 
而 土 ， 情 况 可 能 更 加 糟糕 。 对 那些 面向 客户 的 应 用 而 言 ， 这 是 一 个 最 常见 的 问题 ， 特 别 
是 那些 经 常 在 移动 设备 上 被 访问 的 应 用 ， 不 过 这 也 可 能 是 任何 应 用 需要 面 对 的 问题 。 对 
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于 这 个 用 例 而 言 ， 服 务 器 端 泻 染 的 目的 是 降低 初始 页 面 的 用 户 感 知 加 载 时 间 ， 以 便 用 户 
可 以 在 一 秒 内 看 到 真实 的 内 容 而 不 受 设备 种 类 或 者 网 络 速度 的 影响 。 针 对 这 个 目标 ， 使 
用 服务 器 端 泻 染 比 使 用 客户 端 泻 当 更 有 优势 。 


SEO 























虽然 Google 搜索 爬虫 正 不 断 地 改善 客户 端 泻 当 内容 的 索引 性 ，SEO 在 将 来 可 能 不 再 需 
要 依靠 服务 器 端 泻 染 ， 但 在 今天 ， 面 向 客户 的 应 用 仍然 需要 借助 服务 器 端 泻 染 来 提高 搜 


索引 擎 排行 。 这 是 为 什么 呢 ? 


多 





























首先 ， 疏 虫 至 今 依 然 还 不 是 非常 完善 的 。 在 很 多 情况 下 ， 热 虫 或 许 不 能 准确 地 索 
引 客 户 端 演 染 的 内 容 。 这 往往 是 由 JavaScript 的 限制 或 异步 加 载 带 来 的 时 序 问 题 
所 造成 的 。 

通过 服务 器 端 泻 染 ， 仆 虫 可 以 准确 判断 用 户 需 要 花费 多 长 时 间 看 到 内 容 〈 即 文档 加 
载 完 成 事件 )。 要 在 客户 端 实现 这 一 点 并 不 容易 (而且 正如 上 一 个 用 例 中 提 到 的 那样 ， 
即使 能 够 测量 时 间 ， 通 常 也 会 比 服务 器 端 泻 染 要 慢 得 多 )。 

对 于 关键 字 搜 索 的 竞争 排名 而 言 ， 还 没有 纯 客户 端 Web 应 用 击败 服务 器 端 泻 染 网 站 
的 任何 案例 (比如 , 想 想 “平板 电视 ”或 “2015 年 最 佳 轿车 ”这 样 的 大 件 商品 的 条 目 ) 。 





























浏览 器 支持 
使 用 更 先进 的 Web 技术 (如 Web Components) 的 缺点 是 ， 这 些 先 进 技 术 难 以 支持 旧版 
本 的 浏览 器 。 这 就 是 Angular 2 不 再 对 低 于 IE9 的 浏览 器 提供 正式 支持 的 原因 。 然 而 ， 
根据 应 用 的 具体 构建 方式 ， 可 以 将 某 些 富 客户 端 行为 放 在 服务 器 端 进行 ， 以 支持 旧版 的 


济 


4 








览 器 ， 应 用 开发 者 同时 也 可 以 利用 Web 平台 的 最 新 特性 。 以 下 是 两 个 示例 。 














若 应 用 主要 是 用 于 展示 信息 的 ， 那 么 可 以 为 使 用 旧版 浏览 器 的 用 户 提 供 这 些 信息 ， 
而 无 须 提供 任何 其 他 的 客户 端 功 能 。 在 这 种 情况 下 ， 可 以 为 使 用 旧版 浏览 器 的 用 户 
提供 一 个 完全 由 服务 器 端 泻 染 的 网 站 ， 而 使 用 新 版 浏览 器 的 用 户 将 可 以 获取 到 完整 
的 客户 端 应 用 。 

若 应 用 必须 支持 IE8， 则 客户 端 Web 应 用 的 大 部 分 功能 都 可 以 正常 工作 ， 只 有 其 中 
一 个 组 件 用 到 的 功能 不 支持 卫 8。 对 于 那 一 个 组 件 来 说 ， 应 用 可 以 从 服务 器 端 获 取 完 


整 演 染 的 这 部 分 HTML 。 


链接 预览 
对 于 那些 提供 链接 后 可 以 显示 网 页 内 容 预 览 的 应 用 ， 则 需要 依赖 服务 器 端 演 染 。 由 于 捕 
获 客户 端 演 染 的 Web 页 面 比较 复杂 ， 这 些 程序 在 可 预见 的 未 来 可 能 将 会 继续 依赖 服务 
器 端 泻 染 。 最 著名 的 示例 包括 Facebook、G+、LinkedIn 这 样 的 社交 媒体 平台 。 与 SEO 
的 用 例 类 似 ， 这 与 面向 客户 的 应 用 的 相关 性 更 强 。 
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13.3.2 Web 应 用 脱节 
Web 应 用 脱节 (Web App Gap) 是 我 创造 的 一 个 术语 ， 表 示 用 户 在 浏览 器 中 从 发 起 URL 
请 求 到 获得 一 个 带 功能 的 可 视 页 面 所 需要 的 时 间 。 对 大 部 分 的 客户 端 Web 应 用 而 言 ， 这 段 
时 间 花 费 在 等 待 服务 器 端 响 应 、 下 载 静 态 资源 、 初 始 化 客户 端 应 用 框架 、 抓 取 数 据 ， 并 最 
终 将 输出 绘制 到 屏幕 上 。 对 大 多 数 的 Web 应 用 而 言 ， 这 段 胶布 时 间 通 常 需要 3~7 秒 ， 甚 
至 更 多 。 在 这 段 时 间 里 ， 用 户 只 能 看 着 一 个 空白 屏幕 或 者 一 个 旋转 图 标 。Filament Group 
(https:Wwww.filamentgroup.comylab/mv-initial-load-times.html) 的 调查 显示 ， 在 页 面 加 载 时 
间 超 过 3 秒 之 后 ，57% 的 用 户 会 放弃 打开 这 个 页 面 。 















































如 今 ， 很 多 用 户 已 经 被 移动 端的 原生 用 户 体验 惯 坏 了 。 他 们 不 会 在 乎 这 是 一 个 网 站 还 是 移 
动 应 用 ， 他 们 只 想 要 应 用 能 够 立即 呈现 并 提供 功能 。 我 们 的 Web 应 用 如 何 才能 做 到 这 一 点 
呢 ? 换 句 话 说 ， 我 们 要 如 何 消 除 Web 应 用 脱节 的 这 段 时 间 呢 ? 





以 下 是 四 种 可 能 的 解决 方案 。 


缩短 脱节 时 间 
确实 存在 很 多 种 性 能 优化 的 方案 ， 比 如 缩小 客户 端 JavaScript 代码 或 者 利用 缓存 。 但 问 
题 是 ， 一 些 因素 是 你 完全 无 法 掌控 的 ， 比 如 网 络 带 宽 、 客 户 端 设备 的 性 能 等 。 


懒 加 载 

在 大 部 分 情况 下 ， 客 户 端的 初始 请 求 会 导致 服务 器 端 返 回 一 份 巨 大 的 静 荷 数据 。 这 份 初 
始 静 荷 数据 包含 了 很 多 初始 视图 中 不 需要 用 到 的 内 容 。 如 果 可 以 将 初始 净 荷 数据 减少 到 
只 包含 初始 视图 需要 的 内 容 ， 那 么 它 就 可 能 变 得 很 小 ， 加 载 速度 也 会 快 很 多 。 虽 然 这 种 
方式 在 理论 上 是 可 行 的 ， 但 却 很 难 实现 。 我 还 没 发 现 有 哪个 库 或 者 框架 可 以 帮助 你 开 箱 
即 用 地 完成 这 件 事情 。 


服务 工作 线程 
Addy Osmani 最 近 提出 了 使 用 应 用 壳 架 构 (https://addyosmani.com/blog/application-shell/) 
的 想法 ， 人 允许 在 浏览 器 中 运行 的 服务 工作 线程 下 载 并 缓存 所 有 的 资源 ， 以 便 后 续 请 求 茶 
个 特定 URL 时 应 用 可 以 立即 从 缓存 中 泻 染 内 容 。 然 而， 初始 加 载 可 能 依然 会 很 慢 ， 因 
为 资源 依然 需要 下 载 ， 而 且 目 前 并 非 所 有 浏览 器 都 支持 服务 工作 线程 ， 有 具体 参见 Can I 
Use..7 (http://caniuse.com/#feat=serviceworkers) 网 站 的 兼容 性 列表 。 


服务 器 端 泻 ; 

初始 服务 器 端 响应 中 包含 一 个 完整 泻 染 的 页 面 ， 从 而 可 以 立即 向 用 户 展示 页 面 。 随 后 ， 
在 用 户 开 始 查 看 页 面 并 决定 做 些 什么 的 同时 ， 浏 览 器 会 在 后 台 加 载 客 户 端 应 用 代码 。 一 
旦 客户 端 完成 初始 化 工作 并 获取 到 需要 的 数据 ， 客 户 端 应 用 就 能 够 接管 并 控制 整个 页 面 
的 内 容 。 


这 个 方案 已 经 整合 到 Angular 2 中 ， 你 可 以 免费 获取 。 
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13.3.3 Angular 2 演 染 架构 


Angular 2 的 服务 器 端 泻 染 架 构 如 图 13-2 所 示 。 





狠 




















toString() 


你 的 Angular 2 应 用 


ServerDomRenderer | ”DomRenderer 





to browser DOM 





图 13-2: Angular 2 服务 器 端 泻 染 
我 们 来 分 解说 明 。 


Angular 2 应 用 
的 最 上 方 是 你 基于 Angular 2 编写 的 
API。 








受 | 














锋 用 层 





应 用 层 不 需要 依赖 于 任何 特定 的 环境 。 这 
browser 或 者 Node.js 的 process 对 象 。 应 用 层 中 的 所 有 内 容 都 可 以 在 浏 
J 组件 、 发 起 HTTP 调用 ， 并 “编译 ”你 的 应 





端 或 移动 设备 上 运行 。 这 层 负 责 运行 你 





自 定义 代码 ， 这 些 代 码 调用 了 Angular 2 应 用 层 的 


意味 着 ， 这 一 层 没 有 直接 引用 window、 


服务 器 


I RS SU 


见 秦 病 、 





用 。 编 译 过 程 的 输出 结果 是 一 个 组 件 树 ， 其 





中 的 每 个 组 件 都 包含 两 个 主要 的 数据 对 象 : 











绑 定 关系 以 及 某 个 被 称 为 ProtoView 的 东西 ， 其 本 质 上 是 一 





ee 
宜 染 层 。 





式 。 组 件 树 会 从 应 用 层 传 递 到 演 


泻 染 层 
演 染 层 包 含 两 部 分 。 第 
给 某 个 特定 的 Renderer。 
轻松 地 通过 Angular 2 的 依赖 注入 功能 进行 
将 HTML 以 字符 串 


ServerDomRenderer 代替 DomRenderer 。 





了 ServerDomRenderer, 


唯一 需要 注意 的 是 ， 若 想 让 你 的 Angular 2 应 


到 形式 输出 口 


个 组 件 模板 的 内 部 表示 形 


一 部 分 是 可 以 被 应 用 层 引 用 的 一 套 通 用 接口 。 随 后 接口 将 交 
默认 值 是 DomRen 


I Dm 


览 器 DOM， 但 这 也 可 以 
器 端 泻 染 而 言 ， 我 们 编写 


器 端的 引导 过 程 将 会 使 用 


derer， 输 出 到 浏 
J 了 改写。 而 对 服务 


日 。 服 务 





DRS 


用 在 服务 器 


于 演 染 


端 进 行 泻 染 ， 那 你 就 不 能 在 代码 
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中 直接 引用 任何 的 DOM 对 象 。 例 如 ， 你 不 能 使 用 window 全 局 对 象 ， 而 需要 使 用 Angular 2 
API 中 的 Window 类 。 这 使 得 Angular 2 可 以 限制 全 局 客户 端 对 象 的 使 用 ， 并 就 在 服务 器 端 实 
现 等 价 的 功能 提供 一 定 的 保证 。 














13.3.4 Preboot 

在 演讲 接近 尾声 时 ， 我 又 抛 出 了 一 件 我 们 最 近 才 发 现 的 事情 。 尽 管 我 们 采取 的 方案 可 以 改 
善 感知 性 能 ， 但 仍然 存在 一 个 问题 。 如 果 从 用 户 看 到 服务 器 端 演 染 的 视图 到 客户 端 接管 并 
控制 应 用 的 这 段 时 间 中 ， 用 户 与 页 面 发 生 了 交互 事件 ， 那 么 会 发 生 什么 事情 呢 ? 如 上 所 
述 ， 这 上段 时 间 通 常 长 达 2~6 秒 ， 其 至 更 长 。 虽 然 用 户 在 这 上段 时 间 里 可 以 看 到 内 容 ， 但 如 果 
试图 与 页 面 进行 交互 ， 结 果 却 是 什么 事情 也 没有 发 生 ， 那 么 用 户 就 会 感到 失望 (更 糟糕 的 
是 出 现 某 些 意料 之 外 的 状况 )。 对 于 表单 页 面 ， 这 个 问题 尤其 突出 。 比 如 ， 当 用 户 在 这 段 
时 间 里 点 击 提交 按钮 ， 那 么 会 发 生 什么 事情 呢 ? 当 用 户 正 在 文本 框 中 输入 内 容 ， 而 此 时 视 
图 从 服务 器 端 切换 到 客户 端 ， 那 么 又 会 发 生 什么 呢 ? 

































































针对 这 类 情况 ， 以 下 是 一 些 最 常见 的 解决 方案 。 


(1) 避免 使 用 服务 器 端 演 染 客户 端的 表单 。 
(2) 在 客户 端 引导 巡 辑 完成 执行 前 ， 禁 用 表单 元 素 。 


这 两 种 解决 方案 我 们 都 不 喜欢 ， 因 而 我 们 创建 一 个 新 的 库 ， 将 其 命名 为 Preboot， 用 于 在 客 
户 端 接 管 前 处 理 服务 器 视图 中 的 事件 。 因 此 ， 用 户 就 可 以 在 这 段 时 间 键 入 文本 框 、 点 击 按钮 
或 者 在 页 面 上 进行 任何 其 他 操作 ， 一 旦 客户 端 引 导 执 行 完成 ， 客 户 端 将 无 颖 处 理 这 些 事件 。 
在 大 部 分 情况 下 ， 页 面 的 用 户 体验 都 是 能 够 即时 响应 功能 的 ， 这 也 正 是 我 们 试图 实现 的 。 
























































最 棒 的 是 ， 这 个 库 不 是 Angular 2 专用 的 。 你 可 以 将 这 个 库 同 Angular 1 一 起 使 用 ， 还 可 以 
用 在 React、Ember 或 者 任何 其 他 框架 当中 ， 多 棒 啊 1 





13.4 Angular Universal 


我 们 的 AngularU 演讲 取得 了 热烈 反响 ， 开 发 者 纷纷 表示 希望 能 够 尽快 使 用 这 些 功能 。Brad 
和 Tobias 决定 将 我 们 的 成 果 建 立 为 Angular 的 一 个 官方 项 目 ， 并 称 之 为 Angular Universal 
(https://github.com/angular/universal ) 。 




















在 将 代码 迁移 到 Angular 的 官方 仓库 前 ， 我 们 所 做 的 大 部 分 工作 是 完全 脱离 Angular 2 的 
核心 库 的 。 在 接 下 来 的 三 个 月 里 ， 我 们 开始 将 其 中 的 一 部 分 放 到 核心 中 。 在 Angular 2 发 
布 之 时 ， 我 们 希望 这 个 Angular Universal 库 能 够 尽 可 能 地 轻 量 化 ， 它 主要 由 特定 的 后 端 
Node.js 框架 的 集成 库 组 成 ， 如 Express 或 Hapi.js。 
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全 栈 Angular 2 

到 目前 为 止 ， 我 只 谈 及 了 服务 器 端 演 染 ， 这 只 是 全 栈 JavaScript 开发 这 个 大 概念 的 其 中 一 
部 分 。 服 务 器 端 演 染 之 所 以 经 常备 受 关注 ， 是 因为 这 可 能 是 最 大 的 技术 难点 ， 但 我 们 真正 
的 目的 是 ， 无 论 在 何 处 ， 都 可 以 使 用 JavaScript 来 实现 所 有 功能 。 事 实证 明 ，Angular 2 就 
是 为 此 而 生 的 一 个 框架 。 在 介绍 这 一 点 之 前 ， 我 们 先 退 一 步 ， 解 释 一 下 你 为 什么 应 该 关注 
全 栈 JavaScript 开发 。 

相信 很 多 人 都 听 过 这 样 一 个 建议 :“ 使 用 正确 的 工具 做 正确 的 事情 "。 听 起 来 很 聪明 ， 但 这 
只 是 从 某 种 程度 上 来 说 的 。 问 题 在 于 ， 在 实现 这 个 想法 时 ， 事 情 并 不 一 定 总 会 按照 你 预期 
的 方式 来 进行 。 以 下 是 我 们 面临 的 一 些 问 题 。 





























委员 会 
在 很 多 大 公司 ， 你 并 不 能 直接 开始 使 用 某 项 新 技术 ， 而 是 需要 经 过 好 几 个 委员 会 的 同意 
(过 程 总 是 会 很 有 意思 )。 当 这 样 做 时 ， 最 终 的 决定 因素 可 能 就 是 政治 性 多 于 价值 本 身 。 


争论 
在 某 些 工作 环境 下 ， 技 术 的 选择 可 能 会 导致 团队 成 员 因 观点 不 同 而 关系 紧张 。 


上 下 文 切换 
即使 不 会 遇 到 前 两 个 问题 ， 但 需要 在 一 个 多 元 化 的 技术 环境 中 工作 时 ， 你 可 能 就 会 遇 到 
上 下 文 切 换 的 问题 。 使 用 不 同 的 技术 工作 时 ， 开 发 者 会 遇 到 从 一 种 技术 切换 到 另外 一 种 
技术 所 带 来 的 精神 损失 ， 又 或 许 是 根据 技术 界限 划分 团队 带 来 的 额外 的 沟通 成 本 ,造成 
一 些 生产 力 的 损失 。 


代码 重复 
最 后 ， 当 拥有 一 个 多 元 化 的 技术 环境 时 ， 重 复 代 码 的 产生 几乎 是 不 可 避免 的 现象 。 公 司 
通常 会 遵守 一 些 共同 的 约定 ， 如 安全 标准 和 数据 模型 等 ， 对 于 使 用 的 每 种 语言 都 要 实现 
一 遍 这 些 约定 。 




















你 认为 有 多 少 人 会 在 工作 中 遇 到 上 述 的 这 些 问 题 呢 ? 有 很 多 可 以 解决 或 者 避免 这 些 问题 
的 方法 ， 但 我 有 一 个 简单 的 解决 方法 : 只 用 一 把 锤子 ， 而 将 一 切 都 当 作 钉子 。 只 需要 选 
择 一 种 技术 ， 并 用 在 几乎 所 有 的 场合 。 如 末 你 能 做 到 这 一 点 ， 那 么 所 有 的 这 些 问 题 都 将 
不 复 存 在 。 


这 在 理论 上 听 起 来 很 不 错 ， 但 事实 上 ， 在 很 长 一 段 时 间 里 ， 没 有 一 个 很 好 的 工具 可 以 成 为 
这 个 在 任何 地 方 都 可 以 使 用 的 魔法 之 锤 。 唯 一 能 不 受 限制 运行 的 语言 只 有 JavaScript， 因 
此 ， 如 果 想 要 尝试 使 用 一 种 技术 来 完成 所 有 的 事情 ， 你 只 能 选择 JavaScript。 

这 听 起 来 有 点 奇怪 ， 因 为 JavaScript 在 浏览 器 端的 使 用 情况 很 粳 糕 ， 更 不 用 说 在 服务 器 端 或 移 
动 设 备 上 了 。 但 随 着 时 间 的 推移 ， 状 况 也 会 不 断 改 善 。 现 在 我 们 已 经 快要 到 达 一 个 转折 点 了 。 
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因此 ， 我 认为 仅仅 使 用 原生 的 ES5 JavaScript 是 难以 实现 全 栈 开 发 的 ， 但 可 以 使 用 ES6、 
ES7 以 及 Angular 2 的 一 些 特性 后 ， 你 将 拥有 构建 不 可 思议 的 全 栈 应 用 所 需要 的 一 切 。 以 
下 特性 可 以 让 全 栈 开 发 变 得 更 加 简单 。 


通用 的 依赖 注入 
Angular 1 的 依赖 注入 是 比较 有 效 的 ， 但 多 少 存在 一 些 缺 陷 。Angular 2 的 依赖 注入 简直 
堪 称 完美 。 它 不 仅 可 以 用 于 客户 端 或 者 服务 器 端 ， 还 可 以 脱离 Angular 单独 使 用 。 这 使 
得 构建 全 栈 应 用 非常 简单 ， 因 为 你 可 以 使 用 依赖 注入 来 替换 任何 特定 容器 的 代码 (比如 
那些 引用 了 window 对 象 且 与 浏览 器 紧 看 合 的 代码 )。 


通用 的 服务 器 端 泻 ; 
上 文 已 经 提 及 。 

通用 的 事件 发 送 
Angular 2 利用 RxJS observable 来 处 理事 件 ， 其 工作 方式 在 客户 端 与 服务 器 端 是 相同 的 。 
而 在 Angular 1 中 ， 事 件 发 送 功能 约束 在 客户 端的 $scope 中 ， 因 此 服务 器 端 不 存在 这 个 
功能 。 


了 












































通用 的 路 由 
与 事件 发 送 类 似 ， 在 Angular 2 中 ， 路 由 功能 可 以 同时 在 客户 端 与 服务 器 端 工作 。 
ES6 模 块 


我 们 的 模块 经 过 了 格式 化 ， 全 部 支持 ES6。 你 也 可 以 使 用 一 种 格式 来 编写 JavaScript 代 
码 ， 并 用 在 所 有 地 方 。 


ES7 装 饰 器 (TypeScript) 
在 进行 大 型 的 全 栈 开 发 时 ， 通 常 有 一 些 横 切 关注 点 ， 如 安全 、 缓 存 等 ， 这 些 功能 可 以 通 
过 TypeScript 中 的 自 定义 装饰 器 来 轻松 实现 。 











工具 (Webpack、JSPM、Browserify) 
所 有 新 的 模块 打包 工具 都 可 以 接收 一 个 入 口 点 并 遍历 依赖 树 ， 从 而 打包 生成 一 整个 
JavaScript 文件 。 这 对 于 全 栈 开 发 来 说 格外 有 用 ， 因 为 这 意味 着 你 不 再 需要 划分 /server 
与 /client 文件 夹 。 取 而 代 之 的 是 将 客户 端的 文件 从 依赖 树 中 提取 出 来 。 














13.5 GetHuman.com 

之 前 提 到 过 ， 我 在 Angular 1 中 为 GetHuman 创建 了 一 套 服 务 器 端 这 染 的 解决 方案 。 在 我 
编写 本 章 时 ， 这 套 解决 方案 已 经 在 生产 环境 中 运行 长 达 6 个 月 了 。 那 么 ， 我 们 是 否 实现 了 
服务 器 端 演 染 与 全 栈 开发 的 目标 呢 ? 














我 可 以 明确 回答 这 个 问题 : 是 的 。 思 考 以 下 因素 。 
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性 


2b 
Bt 





在 大 部 分 情况 下 ， 用 户 在 一 秒 后 就 可 以 看 到 初始 视图 。 








可 伸缩 性 





在 一 个 只 有 三 核 的 Web 服务 器 上 ， 我 们 可 以 轻松 地 支持 1000 多 位 用 户 的 并 发 请 求 。 





生产 效率 





到 目前 为 止 ， 我们 只 有 两 个 全 职 的 开发 人 员 ， 负 责 十 几 个 不 同 的 Web 应 用 。 


在 不 断 迭 代 与 改进 Angular 1 基础 设施 的 同时 ， 我 们 也 在 设计 Angular 2 版 本 应 用 的 原型 。 


为 此 ， 我 在 FullStackAngular2.com (http://fullstackangular2.com/) 创建 了 一 个 开源 的 电 商 
应 用 ， 和 希望 可 以 借 此 找到 一 种 理想 的 方法 来 构建 全 栈 的 Angular 2 应 用 。 


13.6 ”补充 说 明 


要 想 了 解 更 多 关于 Angular Universal 和 构建 全 栈 Angular 2 应 用 的 信息 ， 请 点 击 以 下 链接 : 
































Angular Universal 源 代码 (https://github.com/angular/universal) 

Angular Universal 示例 (https://github.com/angular/universal-starter) 

全 栈 Angular 2 示例 (http://fullstackangular2.com/) 

我 的 博客 (https://medium.com/@jeffwhelpley) 

Twitter (@jeffwhelpley, https://twitter.com/jeffwhelpley 与 @gdi2290, https://twitter.com/ 
gdi2290) 
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第 14 章 


Brisket 





Wayne Warner 





Brisket 是 一 个 基于 Backbone.js 的 同 构 JavaScript 框架 。 它 是 我 的 团队 ( 彭 博 社 ，Consumer 
Web team) 负责 开发 的 。 在 2014 年 10 月 2 日 ， 通 过 芯 博 社 的 公司 账号 在 GitHub 发 布 ， 
项 目 遵 守 Apache 2 的 开源 协议 。 








在 开发 Brisket 时 ， 我 的 团队 遵循 了 以 下 三 个 原则 : 


。 代码 自由 
。 跨 环境 一 致 的 API 
。 无 须 关 心 其 中 的 过 程 





在 深入 了 解 Brisket 之 前 ， 我 们 有 必要 先 介绍 一 下 构建 Brisket 的 原因 。 


14.1 问题 


和 大 部 分 框架 一 样 ，Brisket 是 因 产 品 需求 而 生 的 。 在 2013 年 年 末 ， 我 的 团队 负责 重新 启 
动 Bloomberg.com 的 观点 板块 ， 将 其 作为 新 的 数字 媒体 BloombergView.com 发 布 。 产 品 
队 和 设计 师 对 这 个 新 站 点 提出 了 下 列 目标 : 








。 无 限 深 动 
。 带 有 灯箱 效果 的 弹出 式 文章 
。 响应 式 设计 (移动 端 优先 ) 
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。 操作 响应 迅速 
。 易于 SEO 


我 们 有 4 位 工程 师 与 3 个 月 的 时 间 ( 即 12 周 )。 








当时 ， 我 的 团队 只 有 构建 传统 站 点 的 经 验 一 一 用 服务 器 端 演 染 的 页 面 及 (在 浏览 器 中 的 ) 
混合 式 的 客户 端 代码 来 处 理 用 户 交 互 。 传 统 网 站 的 一 个 典型 示例 是 IGN.com (http:Wwww. 
ign.com/)。 我 们 在 服务 器 端 使 用 Ruby on Rails 进行 泻 染 ， 在 客户 端 使 用 jQuery、 一 部 分 
Backbone.js 以 及 原生 的 JavaScript 来 组 合 客 户 端 代码 。 我 们 只 构建 传统 网 站 ， 因 为 它们 可 
以 快速 地 在 服务 器 端 泻 染 出 页 面 ， 并 提供 强大 的 SEO 支持 。 



































快速 泻 染 页 面 对 一 个 数字 媒体 的 成 功 是 至 关 重 要 的 ， 因 为 媒体 内 容 是 一 个 相当 灵活 的 产 
品 ， 如 果 能 够 从 其 他 地 方 更 迅速 地 获取 到 相同 的 内 容 ， 那 我 骨 定 会 转 而 去 那里 阅读 。 高 效 
的 SEO ( 指 页 面 能 够 被 搜索 ) 也 是 至 关 重 要 的 ， 因 为 搜索 引擎 仍然 是 数字 媒体 产品 流量 的 
最 大 影响 因素 之 一 。 





























当 网 站 需要 提供 很 多 客户 端 功 能 时 ， 传 统 网 站 往往 就 显得 力不从心 了。 在 使 用 传统 网 站 方 
式 构建 新 站 点 时 ， 我 们 预计 会 存在 以 下 问题 。 


无 法 共享 模板 与 业务 逻辑 
无 限 滚动 、 灯 箱 效果 式 的 文章 这 样 的 功能 需要 使 用 客户 端 谊 染 。 由 于 我 们 的 服务 器 端 
模板 是 使 用 Ruby 编写 的 ， 因 此 不 能 在 客户 端 重用 它们 。 我 们 不 得 不 使 用 JavaScript 重 
新 创建 一 套 模板 。 使 用 两 套 模板 还 迫使 我 们 必须 维护 两 套数 据 模型 (一 套 Ruby， 一 套 
JavaScript) ， 但 实际 上 它们 做 的 却 是 同一 件 事情 。 


糟糕 的 功能 封装 
就 传统 网 站 而 言 ， 服 务 器 端 负 责 泻 染 标记 ， 随 后 客户 端 代码 为 其 增添 功能 。 如 果 采 用 多 
种 语言 编写 一 项 功能 的 代码 ， 并 (很 可 能 ) 存放 于 文件 系统 的 不 同 目录 中 ， 那 么 就 更 加 
难以 说 清楚 这 项 功能 的 完整 生命 周期 。 


页 面 切 换 的 感知 速度 缓慢 
在 传统 网 站 中 ， 点 击 打开 一 个 新 页 面 往往 让 人 觉得 比较 慢 (即使 事实 上 未 必 如 此 )。 在 
歼 取 新 页 面 的 这 个 过 程 中 ,浏览 器 与 服务 器 端 进行 往返 来 重新 泻 染 页 面 的 所 有 内 容 ， 并 
重新 运行 客户 端 代码 ， 页 面 之 间 的 过 渡 感 觉 上 总 是 比 实际 要 慢 。 


在 SPA 中， 服务 器 端 只 演 染 最 小 化 标记 ， 客 户 端 应 用 泻 染 内 容 并 处 理 交 互 。 这 样 看 来 ， 
SPA 更 加 合适 新 站 点 。 从 更 广泛 的 角度 来 看 ，SPA 就 好 比 潘多拉 。SPA 可 以 将 所 有 的 应 用 
代码 整合 在 一 起 ， 提 供 更 快 的 页 面 切换 感知 速度 并 构建 丰富 的 UI。 然 而 ，SPA 并 不 是 万 灵 
药 。 以 下 是 SPA 的 一 些 缺 点 。 
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初始 页 面 加 载 速度 缓慢 
尽管 在 切换 页 面 时 感觉 很 快 ， 但 SPA 的 初始 页 面 的 加 载 速 度 往往 比较 慢 。 这 是 因为 在 
加 载 初始 页 面 时 需要 下 载 应 用 的 所 有 静态 资源 ， 并 启动 应 用 。 在 应 用 启动 之 前 ， 用 户 看 
不 到 任何 内 容 。 









































缺少 SEO 

由 于 SPA 通常 不 会 在 服务 器 端 泻 染 标记 ， 因 此 并 不 能 产生 任何 内 容 供 搜索 引擎 展 取 。 
在 2013 年 年 末 ， 搜 索引 擎 才 开始 尝试 疏 取 SPA。 然 而 ， 这 项 技术 还 不 成 熟 (具有 风险 
性 )， 我 们 不 能 仅 依赖 于 它 。 











传统 站 点 和 SPA 优势 互补 ， 即 一 方 的 优势 可 以 解决 男 一 方 的 短 板 。 于 是 团队 发 间 了 :“ 如 
何 才能 从 这 两 种 方法 中 得 到 所 有 的 优势 呢 ?” 


14.2 两全其美 


Spike Brehm 在 一 篇 文章 (http://nerds.airbnb.com/isomorphic-javascript-future-web-apps/) 中 
提出 了 Isomorphic JavaScript 这 一 术语 ， 这 篇 文章 介绍 了 Airbnb 开发 的 Rendr 库 ， 阐 明了 
JavaScript 是 可 以 在 客户 端 与 服务 器 端 之 间 共 享 的 。 通 过 服务 器 端的 Node.js，Rendr 率先 使 
用 了 相同 的 代码 库 来 演 染 页 面 ， 而 在 浏览 器 中 则 使 用 SPA 来 处 理 客户 端 功能 。 虽 然 共享 代 
码 库 这 种 方式 确实 是 我 们 想 要 的 ， 但 这 样 做 可 能 会 产生 牺牲 现 有 工具 (包括 Ruby、Rails、 
jQuery 等 ) 的 风险 。 从 本 质 上 来 讲 ， 团 队 将 重建 我 们 所 有 的 基础 设施 。 但 在 冒 这 么 大 的 风 
仿 前 ， 我 们 探讨 了 一 些 选 择 。 











我 们 考虑 的 第 一 种 方式 是 ， 编 写 一 个 SPA 应 用 并 使 用 无 界面 浏览 器 在 服务 器 端 演 染 页 面 。 
但 我 们 最 终 觉 得 在 服务 器 端 构建 两 个 应 用 (一 个 SPA 和 一 个 无 界面 浏览 器 ) 太 复 杂 了 ， 而 
且 容 易 出 错 。 














接 下 来 ,团队 对 2013 年 年 末 可 供 选 择 的 同 构 框架 进行 了 探索 。 然 而 ， 我 们 没有 找到 很 多 
可 靠 的 选择 ， 那 时 的 大 部 分 同 构 框架 还 不 太 成 熟 。 在 探讨 过 的 框架 中 ，Rendr 是 为 数 不 多 
的 已 在 生产 环境 中 运行 过 的 一 个 。 由 于 看 起 来 风险 最 低 ， 因 此 我 们 决定 尝试 使 用 Rendr。 














我 们 使 用 Rendr 构建 了 一 个 BloombergView 的 工作 原型 ， 但 我 们 希望 可 以 在 以 下 这 些 领 域 
具有 更 大 的 灵活 性 。 


模板 
Rendr 默认 是 附带 Handlebars 模板 的 ， 但 我 们 更 倾向 于 使 用 Mustache 模板 。 从 
Handlebars 切换 到 Mustache 似乎 并 不 是 一 项 简单 的 任务 。 





文件 组 织 
与 Rails 类 似 ，Rendr 在 某 些 场景 下 更 倾向 于 使 用 约定 而 非 配置 。 换 名 话说 ， 应 用 必须 
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遵循 特定 的 目录 结构 才能 正常 工作 。 在 这 个 项 目 中 ， 我 们 想 要 通过 领域 驱动 来 划分 目录 
结构 〈 即 文章 、 首 页 、 搜 索 目 录 ) ， 而 不 是 通过 功能 驱动 〈 即 视图 、 控 制 器 、 模 型 ) 。 在 
我 们 看 来 ， 将 与 文章 相关 的 所 有 内 容 放 在 一 起 更 容易 进行 搜索 。 








代码 风格 
我 们 最 关心 的 问题 是 ， 在 描述 一 个 页 面 时 ，Rendr 是 如 何 控制 代码 风格 的 。 如 例 14-1 中 
的 代码 所 示 ，Rendr 控制 器 描述 了 如 何 获取 数据 ， 但 没有 太 多 的 灵活 性 。 当 数据 仅仅 是 
一 个 简单 对 象 而 非 模 型 或 集合 时 ， 并 没有 建立 路 由 的 清晰 说 明 。 此 外 ， 由 于 控制 器 没有 
直接 访问 视图 ， 视 图 将 不 得 不 承担 一 部 分 我 们 想 要 在 控制 器 中 管理 的 职责 。 





























例 14-1 2013 年 的 Rendr 控制 器 


var _ = require('underscore'); 


module.export = { 
index: function(params, callback) { 
var spec = { 
collection: {collection: 'Users', params: params} 
}; 
this.app.fetch(spec, function(err, result){ 
callback(err, result); 
]); 
}3 
show: function(params, callback) { 
var spec = { 
model: {model: 'User', params: param}, 
repos: {collection: 'Repos', params: {user: params.login}} 
3 
this.app.fetch(spec, function(err, result){ 
callback(err, result); 
和 7 
} 
} 


在 探索 了 其 他 的 解决 方案 之 后 ， 我 们 决定 尝试 从 头 开始 构建 自己 的 站 点 。 











14.3 早期 Brisket 

在 花费 十 二 周 中 的 两 周 进 行 技术 选 型 后 ， 我 们 决定 在 主流 客户 端 JS 框架 (包括 Backbone、 
Angular 或 者 Ember) 之 上 进行 构建 ， 以 节省 时 间 。 这 三 种 框架 各 有 优势 ， 但 我 们 选择 基 
于 Backbone 来 构建 ， 因 为 它 是 最 容易 迁移 到 服务 器 端 工作 的 。 


























我 们 在 余下 的 十 周 里 完成 了 站 点 的 构建 工作 。 然 而 ， 由 于 时 间 太 紧 ， 很 难说 清 框架 是 怎样 
开始 构建 的 ， 应 用 是 如 何 完 成 的 。 














Brisket | 135 


14.4 ”成 为 现实 

几 个 月 之 后 ， 我 的 团队 要 负责 构建 一 个 新 的 应 用 BloombergPolitics.com 并 重 构 Bloomberg. 
com。 这 两 项 工作 分 别 要 在 两 个 月 和 三 个 月 之 内 完成 ， 且 中 间 疫 有 任何 间隔 。 在 如 此 紧张 
的 时 间 表 下 ， 我 们 将 BloombergView 变 成 了 一 个 真正 的 框架 一 一 Brisket。 以 下 是 我 们 可 以 
提取 出 来 的 一 些 关 键 工具 。 



































Brisket.createServer 


该 函数 返回 一 个 Express 引擎 ， 你 可 以 在 应 用 中 使 用 这 个 引擎 来 运行 Brisket 应 用 。 





Brisket.RouterBrewery 


构造 路 由 器 ， 支 持 服务 器 端 与 客户 端的 路 由 功能 。 





Brisket.ModelSBrisket.Collection 
标准 Backbone 模型 和 集合 中 与 环境 无 关 的 实现 。 


Brisket.View 


Backbone.View 的 修改 版 本 ， 可 以 支持 一 些 核心 功能 ， 其 中 包括 重新 绑 定 视图 、 子 视图 


管理 、 内 存 管理 等 。 

















Brisket.Templating.TemplateAdapter 
继承 这 个 基 类 ， 以 告诉 Brisket 如 何 泻 染 模板 。 





Brisket request/response objects 


标准 化 的 请 求 /响应 对 象 ， 提 供 cookie、 应 用 层 的 引用 者 、 响 应 状态 等 设置 工具 。 








所 有 这 些 工 具 的 提取 与 重 构 始 终 遵循 Brisket 的 核心 原则 一 一 代码 自由 、 跨 环境 一 致 的 
API、 无 须 关 心 其 中 的 过 程 。 


14.5 ”代码 上 自由 


我 们 从 Rendr 学 习 到 的 知识 是 ， 除 非 限制 开发 者 可 以 编写 的 范围 ， 创 建 一 个 包含 模型 、 路 
由 、 输 出 获取 、 浑 染 等 功能 的 完整 同 构 框架 是 相当 困难 的 。 虽 然 知 道 Brisket 不 能 提供 常规 
Backbone 应 用 的 自由 度 ， 但 我 们 已 经 尽 可 能 去 接近 了 。 






























































Brisket 应 用 的 唯一 要 求 是 ， 必 须 从 路 由 处 理 器 中 返回 一 个 视图 或 视图 的 promise。 其 他 方 
看 都 与 编写 Backbone 应 用 没有 大 大 差别 。Brisket 负责 将 你 的 视图 放 入 页 面 ， 而 不 是 交 由 
每 个 路 由 处 理 器 来 负责 。 与 Spring 框架 中 的 路 由 处 理 器 相似 ， 你 的 路 由 处 理 器 的 职责 就 是 
构造 一 个 对 象 。 框 架 中 的 其 余 一 些 系 统 则 负责 泻 染 这 个 对 象 。 






























































可 以 将 路 由 处 理 器 想象 成 一 个 黑 盒 子 (正如 下 面 的 数字 所 表示 的 )。 在 请 求 初始 化 阶段 ， 
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(Backbone 的 泻 染 引擎 ) 。 





器 ServerRenderer 负责 以 下 几 项 工作 。 


(D) 序列 化 视图 ， 并 和 路 由 的 布局 组 合 起 来 。 
(发 送 当 前 服务 器 端 请 求 中 抓 取 到 的 所 有 数据 〈 又 名 “引导 数据 )， 以 及 HTML 静 衔 





数据 。 
(3) 泻 染 元 标签 。 
(4) 泻 染 页 面 标题 。 














当 用 户 在 浏览 器 中 输入 一 个 URL 时 ，Express 会 处 理 这 个 请 求 ， 并 将 请 求 转发 到 应 用 
黑 盒 子 的 输入 是 一 个 请 求 ， 和 输出 是 一 个 单独 的 视图 。 视 图 的 接收 

















(3) 设 置 HTML 的 基本 标签 ， 使 得 Brisket 的 “应 用 链接 ”功能 可 以 正常 工作 ， 甚 至 在 没有 
Brisket 的 时 候 也 是 如 此 。 


应 用 链接 指 的 是 任何 带 有 相对 路 径 的 销 标 签 。 应 用 链接 用 于 跳 转 到 其 他 路 由 。 所 有 其 他 类 
型 的 链接 (如 绝对 路 径 、 完 整 URL、mailto 链接 等 ) 的 功能 在 任何 其 他 的 Web 页 面 中 都 








是 一 致 的 。 通 过 设置 基本 标签 ， 

















你 可 以 确保 在 禁用 JavaScript 或 用 户 在 JavaScript 完成 下 


载 前 点 击 应 用 链接 时 ， 浏 览 器 会 以 传统 的 方式 跳 转 到 预期 的 路 径 一 一 新 内 容 的 完整 加 载 页 
面 。 通 过 这 种 方式 ， 用 户 总 是 能 够 获取 到 内 容 。 初 始 页 面 的 请 求 过 程 如 图 14-1 所 示 。 




















一 旦 序列 化 后 的 视图 到 达 浏 览 器 ， 你 的 应 用 就 要 承担 起 服务 器 端 剩余 的 工作 了 。 一 种 还 不 
错 的 理解 方法 是 ， 视 图 需要 重 现 出 在 服务 器 端 原本 的 状态 。 要 想 还 原 视图 ，Brisket 需要 重 











新 运行 服务 器 端 已 经 触发 过 的 路 








ClientRenderer 知道 页 下 








i 中 已 经 存在 的 哪些 视 





览 嚣 中 进行 初始 化 时 ， 如 果 已 经 在 页 

















对 应 的 序列 化 版 本 绑 定 起 来 。 














由 。 不 过 ， 这 一 次 的 泻 染 是 通过 ClientRenderer 进行 的 。 


图 是 没有 被 完整 泻 染 的 。 相 反 ， 当 视图 在 浏 





下 中 存在 

















， 那 么 ClientRenderer 就 会 将 它们 与 其 自身 











/firstRoute 











/firstRoute 


/secondRoute 


请 求 


局 的 HTMLNN 济 染 故 


视图 和 布 (成 务 窟 





Backbone 
渲染 引擎 


























14-1: 初始 页 面 请 求 
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在 完成 首次 路 由 后 ， 当 用 户 点 击 应 用 链接 时 ， 则 不 会 再 沿 着 服务 器 端 获 取 所 有 内 容 ， 而 是 
应 用 在 浏览 器 中 处 理 这 个 请 求 。 路 由 处 理 器 的 工作 方式 和 服务 器 端 相 同 ， 即 接收 一 个 请 求 















































并 返回 视图 。 视 图 会 被 发 送 到 CUientRenderer ， 随 后 将 更 新 布局 中 的 内 容 。 图 14-2 对 此 进 


行 了 描述 。 





/firstRoute 









/second i 





Backbone 

















/firstRoute 





Backbone History 











图 14-2: 后 续 的 “页 面 ”请 求 


由 于 路 由 处 理 器 接收 相同 的 输入 并 期 望 能 够 产生 相同 的 输出 ， 




















因此 在 编写 路 由 处 理 器 时 ， 




















你 无 须 孝 虑 运行 环境 这 一 因素 。 你 可 以 根据 需要 来 管理 路 由 处 到 


器 中 的 代码 。 例 14-2 就 是 


























Brisket 路 由 处 理 器 的 一 个 示例 。 








例 14-2 ”Brisket 路 由 处 理 器 


const RouterBrewery = require('path/to/app/RouterBrewery'); 
const Example = require('path/to/app/Example'); 
const ExampleView = require('path/to/app/ExampleView'); 


const ExampLeRouter = RouterBrewery.create({ 
routes: { 
'examples/:exampleId': 'example' 
example: function(exampleId, layout, request, response) { 
if (!request.cookies.loggedIn) { 
response.redirect('/loginpage'); 
} 
request.onComplete(function() { 
layout.doSomething(); 
}); 
const example = new Example({ exampLeId }); 
example.fetch() 
.then(() => { 
const exampleView = new ExampleView({ example }); 





exampLeView.on('custom:event ' ，cConsotLe.Log); 
return exampleView; 


}); 

















这 个 处 理 器 主要 人 负责 选择 视图 来 进行 渲染 ， 但 同时 也 使 用 了 事件 冒 泡 、 基 于 cookie 进行 判 
断 并 在 用 户 可 以 (“完全 ”) 看 到 视图 时 进行 某 些 工作 。 




















你 可 能 还 会 注意 到 ， 构 造 视图 需要 用 到 的 对 象 必须 手动 选择 。Brisket 选择 的 是 基于 配置 
的 方式 ， 而 没有 直接 约定 规则 。 你 可 以 自由 地 组 织 自己 的 应 用 ， 并 创建 一 些 对 你 有 帮助 
的 约定 。 


使 用 任何 模板 语言 

就 我 们 的 新 应 用 而 言 ， 我 的 团队 选择 使 用 Hogan.js (Moustache 模板 的 编译 器 )。 然 而 ， 基 
于 在 Rendr 上 进行 的 尝试 ， 我 们 想 尽量 降低 切换 模板 引擎 的 代价 。Brisket 默认 提供 一 个 简 
单 高 效 的 StringTemplateAdapter (特别 是 使 用 ES6 模板 字符 串 时 )， 但 你 可 以 使 用 继承 在 
所 有 视图 或 某 个 视图 子 集 中 重 写 这 个 类 。 









































要 想 在 视图 中 切换 模板 引擎 ， 可 以 继承 Brisket.Templating.TemplateAdapter， 实 现 
templateToHtml 方法 来 创建 一 个 自 定 义 的 TemplateAdapter。 例 14-3 展示 了 一 种 实现 方式 ， 
这 种 方式 使 用 了 一 个 简单 的 Mustache 模板 适配器 。 











例 14-3 简单 的 Mustache 模板 适配器 


const MustacheTemplateAdapter = TemplateAdapter .extend({ 
templateToHTML(template, data, partials) { 
return Mustache.render(template, data); 
J 
]); 


const MustacheView = Brisket.View.extend({ 


templateAdapter: MustacheTemplateAdapter 
]); 


改变 一 个 视图 的 模板 引擎 只 需要 几 行 代码 。 继 承 于 该 视图 的 任何 视图 也 会 使 用 它 的 模 
板 引 擎 。 


14.6 ” 跨 环境 一 致 的 API 


通过 提供 在 任何 环境 中 均 可 预测 的 一 致 性 API，Brisket 可 以 帮助 开发 者 将 精力 放 在 应 用 逻 
辑 本 身 ， 而 不 是 “我 的 代码 将 在 什么 环境 中 运行 ? ”。 
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14.6.1 模型 /集合 

Brisket 为 Backbone 的 模型 与 集合 创建 了 与 环境 无 关 的 实现 。 从 开发 者 的 角度 来 看 ， 使 
用 Brisket 创建 模型 与 使 用 Backbone 创建 模型 是 完全 相同 的 。 在 客户 端 ， 模 型 使 用 jQuery 
来 获取 数据 。 而 在 服务 器 端 ， 模 型 同样 使 用 jQuery 来 获取 数据 。 服 务 器 端 版 本 的 jQuery 
Ajax 数据 传输 是 通过 Node.js 的 http 包 来 完成 的 。 例 14-4 展示 了 一 个 简单 的 Brisket 模型 。 














例 14-4 Brisket 模型 


const Side = Brisket.Model.extend({ 
idAttribute: 'type', 
urlRoot: '/api/side', 
parse: function(data) { 
return data.side; 
} 
}); 


Brisket 使 用 jQuery 来 进行 客户 端 传输 ， 因 为 Backbone 就 是 默认 使 用 jQuery 来 传输 数据 
的 。 为 了 在 两 个 环境 中 维护 一 套 一 致 的 API，Brisket 在 服务 器 端 同样 使 用 jQuery 来 获取 
数据 。 对 于 服务 器 端 而 言 ， 我 的 团队 更 倾向 于 使 用 Nodejs 环境 的 特定 工具 ， 如 http 或 者 
request。 但 相 比 之 下 ， 在 跨 环 境 中 维护 一 致 的 API 显得 更 为 重要 。 


目前 ， 我 们 打算 抛弃 使 用 jQuery 传输 数据 的 方式 ， 从 而 让 获取 数据 变 得 更 加 简单 、 强 大 。 在 
客户 端 ， 我 们 正 研究 使 用 新 的 Fetch API。 而 在 服务 器 端 ， 我 们 打算 切换 到 http 或 request。 














14.6.2 ”视图 生命 周期 
为 了 让 视图 保持 不 受 环境 的 影响 ，Brisket 支持 原 有 的 render 方法 。 当 View.render 被 调用 
时 ，Brisket 会 执行 如 下 的 演 染 流程 。 








(1) 调用 视图 的 beforeRender 回调 函数 。 

(2) 将 视图 的 模型 与 通过 视图 的 Logic 函数 指定 的 任何 视图 逻辑 合并 成 一 个 单独 的 数据 
对 象 。 

(3) 使 用 视图 的 模板 适配器 、 模 板 ， 以 及 第 1 步 中 得 到 的 数据 ， 将 模板 浑 染 到 视图 的 内 部 元 
素 中 。 

(4) 调用 视图 的 afterRender 回调 函数 。 


























在 Brisket 泻 染 视图 的 模板 之 前 ， 使 用 beforeRender 回调 函数 来 设置 数据 、 排 列子 视图 、 
并 (或 ) 选择 一 个 模板 。beforeRender 在 客户 端 和 服务 器 端 都 会 被 调用 。 

















在 Brisket 将 视图 的 模板 泻 染 到 el 后 ， 使 用 afterRender 回调 函数 来 修改 视图 。 需 要 在 模板 
被 泻 染 后 完成 某 些 工作 (如 添加 一 个 特殊 的 类 ) 时 ， 就 可 以 用 上 这 个 函数 。afterRender 在 
客户 端 与 服务 器 端 都 会 被 调用 。 
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Brisket 视图 还 有 一 个 名 为 onDOM 的 回调 函数 。 一 旦 视图 进入 到 页 面 的 DOM 结构 ， 则 可 以 
使 用 onDOM 回调 函数 在 客户 端 对 视图 作出 修改 。 在 onpoM 回调 函数 中 ， 你 可 以 安全 地 使 用 
window 对 象 。 所 以 ， 如 果 想 要 使 用 一 个 仅 在 浏览 右 中 可 用 的 jQuery 插件 ， 就 可 以 将 逻辑 放 
在 这 个 函数 中 。onDoM 只 会 在 客户 端 被 调用 。 























在 视图 的 泻 染 流程 中 ， 可 以 确定 的 是 ，beforeRender 一 定 会 在 afterRender 之 前 被 调用 。 
而 在 客户 端 ，onDOM 只 会 在 afterRender 后 、 视 图 进入 到 页 面 的 DOM 结构 中 时 才 会 被 
调用 。 












































除了 这 些 特定 的 Brisket 方法 外 ， 你 还 可 以 沿用 处 理 Backbone 视图 的 方式 来 处 理 Brisket 视 
图 。 为 了 促进 这 一 级 别 的 灵活 性 ， 我 们 在 服务 器 端 浑 染 中 使 用 了 jsdom。 大 部 分 的 同 构 框 
架 都 没有 使 用 它 ， 因 为 对 服务 器 端 内 容 的 泻 染 来 说 ， 它 相对 比较 慢 和 重量 级 。 我 们 也 看 到 
了 这 一 点 ， 但 还 是 决定 使 用 它 ， 因 为 我 们 认为 其 编码 的 灵活 性 可 以 压倒 性 能 影响 。 我 们 和希 
望 只 在 需要 解析 DOM 时 才 使 用 jsdon 替代 服务 器 端的 泻 染 实现 。 





























14.6.3 子 视 图 管理 

在 标准 的 Backbone 应 用 中 ， 子 视图 的 管理 可 能 会 比较 环 手 。 虽 然 可 以 在 一 个 视图 中 直接 
演 染 另 一 个 视图 ， 但 要 建立 视图 之 间 的 关系 并 没有 那么 简单 。 另 一 个 痛 点 是 内 存 管理 。 
Backbone 应 用 中 的 一 个 常见 问题 是 ， 由 于 忘记 清理 用 户 不 再 可 见 的 视图 而 导致 内 存 洪 出 。 
在 浏览 器 中 ， 用 户 只 会 查看 几 个 页 面 ， 内 存 溢出 可 能 不 会 导致 灾难 性 的 后 果 ， 但 在 同 构 环 
境 中 ， 客 户 端的 内 存 滋 出 意味 着 服务 器 端 也 会 产生 内 存 液 出 。 当 内 存 泄漏 严重 到 一 定 程度 
时 ， 这 将 会 导致 你 的 服务 器 月 江 (我 们 已 经 得 到 了 这 个 教训 )。 







































































Brisket 提供 了 一 个 子 视图 管理 系统 ， 可 以 帮助 你 管理 内 存 并 显示 子 视图 。Brisket 的 子 视 
图 管理 着 父子 视图 间 的 关联 信息 。 当 在 路 由 之 间 进 行 切换 时 ， 它 还 可 以 帮助 你 确保 清理 视 
图 ， 而 且 子 视图 系统 还 附带 了 便捷 的 方法 ， 可 以 帮助 你 将 子 视 图 放置 到 父 视图 的 标记 中 。 
子 视图 系统 在 所 有 环境 中 的 工作 方式 均 相 同 。 
























































14.6.4 ” 跨 环 境 使 用 的 工具 

一 路 走 来 ， 我 们 在 多 个 面向 消费 者 的 项 目 中 均 使 用 了 Brisket， 遇 到 的 一 些 问 题 对 过 去 的 传 
统 应 用 或 SPA 来 说 比较 简单 ， 但 在 同 构 应 用 中 却 比 较 坏 手 。 在 解决 这 些 问 题 之 后 ， 我 们 向 
Brisket 加 入 了 下 列 这 些 功能 。 














重 定向 到 另 一 个 URL 
Brisket 的 response 对 象 提 供 了 一 个 redirect 方法 ， 该 方法 的 功能 和 Express 引擎 中 的 
response 对 象 的 功能 相同 。 正 如 你 所 期 望 的 那样 ， 该 方法 可 以 重 定向 到 你 提供 的 URL， 
并 提供 一 个 可 选 的 状态 码 。 这 在 服务 器 端 没 有 什么 问题 ， 但 在 同 构 应 用 中 ， 还 有 可 能 会 
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在 浏览 器 中 调用 response.redirect 进行 路 由 跳 转 。 那 么 该 如 何 实现 这 个 方法 呢 ? 是 使 
用 pushState 跳 转 到 应 用 中 的 另 一 个 路 由 ， 还 是 什么 都 不 做 呢 ? 最 后 ， 我 们 决定 让 客户 
端 在 调用 response.redirect 时 触发 新 页 面 的 完整 加 载 ， 就 像 服务 器 端 重 定向 所 做 的 那 
样 。 此 外 ， 通 过 window.Location.reptLace 方法 ， 确 保 新 的 URL 可 以 在 浏览 器 历史 中 取 
代 原 本 请 求 的 URL。 


请 求 引用 者 

在 传统 的 网 站 中 ， 请 求 的 引用 者 在 服务 器 端 可 以 通过 Express 中 间 件 的 request. 
referrer 取得 ， 而 在 客户 端 则 可 以 通过 浏览 器 的 document.referrer 属性 取得 。 在 SPA 
中 ， 虽 然 可 以 在 初始 页 面 加 载 时 通过 document.referrer 取得 正确 的 引用 者 ， 但 随后 跳 
转 到 新 的 “页 面 ”时 就 不 能 采用 这 种 方式 了 。 我 们 需要 解决 这 个 问题 ， 以 便 精确 地 跟踪 
用 户 行为 ， 以 供 分 析 。 标 准 化 的 引用 者 可 以 通过 Brisket 的 request.referrer 属性 取得 。 


14.7 ”前进 之 路 


Brisket 的 灵活 性 决定 了 它 与 第 三 方 工具 的 互 操作 性 非常 高 。 我 们 将 继续 向 社区 寻求 常见 问 
题 的 优秀 解决 方案 ， 而 且 不 希望 我 们 的 框架 会 妨碍 到 这 一 点 。 通 过 尽量 简化 建立 Brisket 应 
用 时 所 需要 的 规则 ， 我 们 确保 有 足够 的 空间 来 整合 任何 的 第 三 方 代 码 ， 哪 怕 这 些 代码 不 是 
完全 用 于 同 构 的 。 





















































14.7.1 ClientApp 与 ServerApp 

在 开始 编写 BloombergView 时 ， 我 的 团队 已 经 对 jQuery 插件 非常 了 解 了 。 在 尝试 使 用 了 
jQuery 插件 之 后 ， 我 们 很 快 发 现 ， 这 些 插件 一 般 并 不 是 同 构 友 好 型 的 一 一 它们 只 能 在 客 
户 端 正常 地 工作 。 为 了 能 够 使 用 jQuery 插件 和 只 能 用 于 客户 端的 其 他 代码 ， 我 们 创建 了 
ClientApp 与 ServerApp 类 。 



































Brisket 提供 了 ClientApp 与 ServerApp 基 类 ， 你 可 以 继承 这 两 个 类 。 你 的 实现 犹如 特定 环 
境 下 的 初始 化 器 。 你 可 以 在 这 些 类 中 设置 特定 环境 的 日 志 、 初 始 化 jQuery 插件 、 根 据 环境 
启用 或 禁用 某 项 功能 。 


14.7.2 布局 模板 


Brisket 提供 了 一 个 继承 于 Brisket.View 的 Layout 类 。 在 布局 模板 中 ， 你 可 以 定义 页 面 中 
的 <html>、<head> 和 <body> 标签 。Brisket 允许 你 为 每 个 路 由 使 用 不 同 的 布局 。 目 前 ， 使 
用 多 重 模 板 只 能 在 服务 器 端 实现 ， 因 为 在 浏览 器 中 交换 布局 比较 复杂 。 由 于 和 其 他 模板 一 
样 ， 布 局 模板 也 是 标准 的 标记 ， 因 此 可 以 在 布局 模板 中 放置 通用 的 第 三 方位 入 代码 ， 如 广 
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14.7.3 ”其 他 经 验 教 训 
Brisket 对 我 的 团队 帮助 很 大 。 我 们 在 非常 紧张 的 期 限 之 内 完成 了 任务 (或 者 只 超期 了 一 
点 )。 尽 管 这 些 网 站 取得 了 成 功 ， 但 我 们 在 过 程 之 中 也 吸取 了 很 多 教训 。 以 下 是 其 中 的 一 


些 经 验 教训 。 




















避免 整个 打包 客户 端 代码 
SPA 的 一 个 普遍 问题 是 ，CSS 和 JavaScript 文件 庞大 。 随 着 应 用 的 发 展 ， 代 码 打包 会 不 
断 增 长 ， 初 始 页 面 加 载 就 会 变 慢 。 我 们 正在 向 Brisket 之 中 添加 新 功能 ， 使 它 可 以 轻松 
地 拆 分 应 用 打包 文件 。 


避免 内 存 溢出 
在 编写 SPA 代码 时 ， 有 时 你 会 忘记 自己 的 代码 将 在 服务 器 端 运 行 。 使 用 单 例 或 者 忘记 
请 除 事 件 绑 定 都 会 导致 内 存 溢出 。 一 般 来 说 ， 关 闭 资源 是 一 项 良好 的 实践 ， 但 许多 前 端 
开发 者 在 SPA 出 现 前 并 没有 注意 到 这 个 问题 。 在 SPA 中 (尤其 是 在 同 构 应 用 中 ) 必须 
遵循 这 项 良好 的 编码 实践 。 


构建 自己 的 框架 可 能 会 让 人 觉得 姐 丧 

虽然 自己 构建 框架 是 一 件 让 人 兴奋 的 事 ， 但 在 时 间 紧 迫 的 情况 下 ， 当 Brisket 由 于 人 缺少 
某 个 工具 而 无 法 实现 某 项 功能 时 ， 这 也 会 让 人 感到 泪 丧 。 从 积极 的 方面 来 看 ， 每 一 次 挫 
折 都 会 促使 Brisket 带 来 新 的 改进 (或 删 减 )。 






























































14.8 Brisket 的 下 一 步 ? 


目前 ， 在 多 个 面向 销 费 者 的 产品 中 ， 我 的 团队 均 在 生产 环境 中 使 用 了 Brisket， 其 中 包括 我 
们 的 旗舰 网 站 Bloomberg.com。 我 们 将 继续 改进 Brisket， 以 便 用 户 可 以 拥有 更 加 良好 的 体 
验 ， 并 让 我 们 的 开发 工作 更 加 愉快 而 富有 成 效 。 尽 管 有 几 个 大 型 网 站 已 经 在 生产 环境 中 使 
用 了 Brisket， 但 Brisket 目前 仍然 是 一 个 未 达到 1.0.0 版 本 的 项 目 。 在 编写 本 章 时 ， 我 们 正 
积极 地 筹备 1.0.0 版 本 的 发 布 工作 。 我 们 计划 中 的 新 功能 / 改进 点 包括 以 下 几 个 方面 : 


。 更 容易 将 一 整个 Brisket 应 用 代码 包 拆 分 为 多 个 小 包 
。 重 构 服务 器 端 演 染 以 提升 速度 

。 继续 简化 提炼 API 

。 解 耦 jQuery 

。 前 瞻 性 地 支持 生成 器 、 异 步 函 数 以 及 模板 字符 串 


尽管 Brisket 目前 已 经 满足 了 我 们 的 要 求 ， 但 我 们 还 将 继续 探究 新 的 技术 和 实现 来 构建 产 
品 。 我 们 的 团队 不 会 局 限于 某 项 特定 的 技术 中 ， 即 使 是 Brisket。 不 管 来 源 ， 我 们 总 是 想 要 
使 用 最 好 的 技术 来 满足 产品 需求 。 
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14.9 补充 说 明 

Brisket 的 构建 之 旅 已 经 走 过 了 一 段 相当 长 的 时 间 ， 当 中 充满 了 跌宕 起 伏 。 要 想 了 解 更 多 
关于 Brisket 的 内 容 及 更 新 情况 ， 可 以 查阅 我 们 的 npm (https://www.npmjs.com/package/ 
brisket) 页 面 。 此 外 ， 你 也 可 以 尝试 使 用 我 们 的 项 目 生 成 器 一 一 Brisket 生成 器 (https:/ 


www.npmjs.com/package/generator-brisket) 。 
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第 15 章 
Colony 案 例 研 究 ; 脱 高 Node 
创建 同 构 应 用 





Patrick Kunka、Richard Davis、Andrew Barker 





Colony 是 一 个 全 球 性 的 电影 流 媒 体 平台 ， 通 过 独家 的 额外 内 容 ， 它 将 内 容 的 所 有 者 与 热情 
的 粉丝 连接 到 一 起 。 在 激烈 的 市 场 竞争 中 ， 我们 的 “走出 去 ”战略 在 很 大 程度 上 依赖 于 世 
界 级 的 产品 和 用 户 体验 ， 以 及 重新 定义 电影 在 线 消费 方式 的 雄心 壮志 。 














15.1 问题 


Colony 的 视频 点 播 模式 与 Netflix 这 样 的 竞争 对 手 有 一 个 重要 的 区 别 ， 即 我 们 平台 上 的 内 
容 是 开放 给 公众 浏览 的 ， 而 购买 是 基于 现 收 现 付 制 的 【pay-as-you-go)， 而 不 是 在 订阅 、 付 
费 之 后 才能 查看 。 谷 歌 念 虫 会 索引 我 们 的 整个 目录 ， 结 果 是 我 们 也 会 因此 而 获 益 。 在 此 基 
础 上 ， 我 们 的 产品 性 质 决定 了 我 们 需要 一 个 可 以 经 常 更 新 的 动态 UI， 以 反映 一 个 复杂 应 用 
的 状态 变化 。 例 如 ， 元 素 必 须 能 够 更 新 ， 以 反映 用 户 是 否 登 录 、 内 容 包 右 (或 者 其 中 的 一 
部 分 ) 是 否 属于 用 户 或 是 否 处 于 租赁 期 内 。 虽 然 原型 是 基于 开 箱 即 用 的 ASP.NET MVC 构 
建 的 ， 但 我 们 很 快 就 意识 到 ， 使 用 SPA 来 构建 前 端 界面 将 能 够 大 大 提高 我 们 应 对 这 些 挑战 
的 能 力 。 同 时 ， 通 过 技术 栈 的 “ 解 耦 "， 前 后 端的 团队 可 以 彼此 独立 地 开展 工作 。 


























因此 ， 我 们 面临 着 进退 两 难 的 困境 ， 如 何 才能 将 一 个 传统 的 、 可 索引 的 网 站 与 SPA 整合 
起 来 呢 ? 2014 年 ，Meteor 这 样 的 同 构 框 架 已 经 提供 了 这 种 功能 的 开 箱 即 用 ， 但 需要 依赖 
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Node.js 后 端 。Angular 和 Ember 这 样 的 SPA 框架 已 经 无 处 不 在 ， 但 这 些 框架 都 有 着 SEO 
的 缺点 ， 这 是 我 们 想 要 避免 的 。 





由 于 我 们 的 后 端 已 经 在 ASP.NET MVC 构建 ， 且 开发 团队 中 有 三 分 之 二 的 人 是 C# 开发 者 。 
我 们 想 知 道 ， 在 不 依赖 Node.js 以 及 不 需要 从 零 开 始 重 构 应 用 的 情况 下 ， 是 否 有 方式 可 以 实 
现 同 构 应 用 具备 的 功能 。 通 常 来 说 ， 我 们 认为 C# 和 JavaScript 是 两 种 分 离 且 不 兼容 的 技术 ， 
如 何 才能 将 这 两 种 技术 整合 到 一 起 ? 换 名 话说， 是 否 可 以 脱离 Nodejs 构建 同 构 应 用 ? 


解决 这 个 问题 将 为 我 们 带 来 许多 性 能 上 的 优势 ， 并 允许 我 们 可 以 在 某 个 特定 的 状态 中 立 
即 泻 染 应 用 。 例 如 ， 和 链接 到 一 个 电影 页 面 之 后 打开 其 预告 片 ， 或 者 在 特定 的 时 间 点 泻 染 
结账 过 程 。 由 于 设计 中 的 大 部 分 UI 是 在 “模型 ”中 出 现 的 ， 这 些 内 容 传统 上 只 能 通过 
JavaScript 进行 泻 染 ， 并 且 只 能 在 前 端 管理 。 





















































我 们 想 让 服务 器 可 以 根据 URL 在 任何 特定 的 状态 下 演 染 任何 页 面 / 视图， 随后 让 客户 
端 JavaScript 应 用 在 后 人 台 运 行 ， 以 接管 演 染 与 路 由 的 工作 。 为 了 实现 这 一 点 ， 首 先 需要 
一 个 前 后 端 通用 的 模板 语言 以 及 共享 的 模板 。 其 次 ， 需 要 通用 的 数据 结构 来 表达 应 用 
状态 。 





























在 此 之 前 ， 视 图 模型 一 直 是 后 端 团 队 负 责 的 ， 但 在 理想 的 解 看 的 技术 栈 中 ， 所 有 的 视图 设 
计 和 模板 都 应 该 由 前 端 团队 负责 ， 包 括 传递 给 模板 的 数据 结构 和 命名 。 


从 消除 所 有 重复 努力 或 重复 代码 的 角度 来 看 ， 需 要 考虑 以 下 几 个 问题 。 


(1) 是否 有 模板 语言 同时 拥有 C# 和 JavaScript 的 版 本 ? 要 想 实现 这 一 点 ， 模 板 语言 就 需要 
符合 “无 逻辑 ”， 不 能 像 C# Razor 或 者 PHP 那样 在 模板 中 包含 任何 的 应 用 代码 。 

(2) 如 果 组 件 需要 在 前 后 端 间 共 享 ， 是 否 可 以 通过 一 种 与 语言 无 关 的 数据 格式 来 表达 ， 如 
JSON? 

(3) 能 否 以 一 种 语言 编写 某 些 内 容 (如 视图 模型 )， 然 后 自动 将 其 转译 为 另 一 种 语言 呢 ? 


15.2 模板 


开始 调研 模板 吧 ! 我 们 非常 喜欢 Handlebars， 因 为 它 具 有 严格 的 无 逻辑 生态 以 及 有 意 限 制 
的 作用 域 。 只 要 给 定 一 个 模板 和 一 个 任意 结构 的 数据 对 和 象 ，Handlebars 就 可 以 输出 一 个 泻 
染 后 的 字符 串 。 由 于 它 不 是 一 个 完整 的 视图 引 击 ， 因 此 只 可 以 用 它 来 演 染 一 些小 片段 或 者 
将 它 整合 到 更 大 的 框架 中 ， 以 渲染 整个 应 用 。 其 无 逻辑 的 哲学 限制 了 模板 逻辑 只 有 扫 f、 
#unless 和 #each， 如 果 和 需要 使 用 更 加 复杂 的 逻辑 ， 那 么 就 不 适合 使 用 Handlebars 了 。 




























































































虽然 最 初 是 为 JavaScript 编写 的 ， 但 Handlebars 也 可 以 使 用 其 他 语言 实现 ， 然 后 就 可 以 用 
在 其 他 语言 中 了 。 如 今 ， 儿 平 每 一 种 流行 的 服务 器 端 编 程 语言 都 有 Handlebars 的 实现 。 值 
得 庆幸 的 是 ， 我 们 在 Handlebars.Net 中 找到 了 维护 良好 的 C# 版 本 的 开源 代码 实现 。 
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我 们 的 前 端 没 有 使 用 整个 页 面 模板 ， 而 是 采用 了 一 种 模块 化 或 者 “原子 类 ”的 设计 哲学 ， 
任何 特定 的 视图 都 是 由 一 系列 可 重复 使 用 的 “模块 ”构成 的 ， 模 块 理论 上 是 可 以 任意 排 
列 并 放置 在 任何 上 下 文 当中 的 。 在 之 前 使 用 Razor 实现 的 服务 器 端 视图 泻 染 的 解决 方案 
中 ， 这 个 概念 并 没有 很 好 地 从 前 端 传递 到 后 端 ， 因 为 后 端 团队 需要 拿 到 静态 模块 ， 将 它们 
拼接 成 更 大 的 结构 ， 并 插入 到 所 需 的 逻辑 与 模板 标签 中 。 然 而 ， 拥 有 共享 的 模板 语言 与 数 
据 结构 之 后 ， 就 没有 理由 不 在 这 两 个 技术 栈 间 共 享 这 些 独 立 的 模块 了 ， 并 且 使 用 C# 或 者 
JavaScript 进行 谊 染 会 得 到 相同 的 结果 。 这 样 的 话 ， 整 个 设计 模块 、 模 板 化 和 动态 化 的 过 
程 就 可 以 完全 交 给 前 端 团队 来 完成 了 。 


15.3 ”数据 

我 们 之 前 的 解决 方案 中 有 一 个 问题 ， 即 原型 中 的 视图 模型 是 临时 性 的 ， 当 添加 功能 时 ， 
需要 有 机 地 演变 每 个 模板 。 之 前 从 未 需要 获取 整个 应 用 的 数据 结构 ， 因 为 数据 只 需要 暴 
露 给 其 中 的 某 一 部 分 视图 就 可 以 了 ， 现 在 两 端的 团队 在 创建 新 的 模板 时 都 需要 为 此 而 付 
出 代价 。 


早期 为 了 避免 这 个 问题 ， 我 们 为 整个 应 用 设计 了 一 个 “全 局 性 的 ”数据 结构 ， 以 便 在 这 个 
单独 的 对 象 中 表示 站 点 、 资 源 与 应 用 状态 。 在 后 端 ， 这 个 结构 化 后 的 数据 会 从 数据 库 中 映 
射出 来 ， 并 传递 给 Handlebars 来 演 染 视图 。 而 在 前 端 ， 一 开始 会 通过 一 个 REST API 来 接 
收 数据 ， 并 将 数据 传递 给 Handlebars。 不 过 ， 在 这 两 种 情况 下 ， 提 供给 Handlebars 的 最 终 
数据 都 是 完全 相同 的 。 


我 们 决定 将 数据 结构 设计 成 如 下 所 示 的 样子 。 可 以 将 这 个 对 象 认 作 整 个 应 用 任何 时 候 
的 状态 容器 : 



















































































{ 
Site: {0} 
Entry: {...}, 
User: {...}, 
ViewState: {...}, 
Module: {...} 

} 


Site 对 象 保存 整个 网 站 或 应 用 的 相关 数据 ， 而 不 关心 当前 正在 查看 的 资源 。 静 态 文本 、 
Google Analytics ID、 任 何 功能 以 及 环境 的 切换 开关 都 可 以 包含 在 这 里 。 


Entry 对 象 保存 了 当前 被 查看 资源 的 相关 数据 〈 如 页 面 或 特定 的 电影 )。 当 用 户 在 网 站 中 进 
行 跳 转 时 ， 被 请 求 的 资源 的 数据 从 一 个 特定 的 端点 被 拉 取 ， 此 时 就 需要 更 新 Entry 属性 。 

















<head> 


<title> 
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</title> 
</head> 





User 对 象 保存 了 当前 登录 用 户 的 非 敏感 数据 ， 如 名 称 、 头 像 和 邮箱 地 址 : 


<aside class="Uuser-sidebar"> 
<h3>Hello !</h4> 


<h4>Your Recent Purchases</h4> 


</aside> 





ViewState 对 象 用 于 反映 视图 的 当前 泻 染 状态 。 这 是 后 端 根据 URL 来 泻 染 复杂 状态 的 决定 
性 因素 。 例 如 ， 泻 染 视 图 时 可 以 选择 一 个 特定 的 标签 、 打 开 模 态 框 或 者 展开 手风琴 ， 只 要 
这 个 状态 拥有 自己 的 URL: 























<nav class="bundle-nav"> 
<a href="/extras/" class="tab tab_active">Extras</a> 
<a href="/about/" class="tab tab_active">About</a> 
</nav> 


Module 对 象 不 是 全 局 性 的 ， 但 当 数据 必须 传递 给 某 个 特定 的 模块 且 不 能 暴露 给 其 他 模块 
时 ， 那 么 就 需要 使 用 这 个 对 象 。 例 如 ， 我 们 可 能 需要 遍历 列表 条 目 中 的 物品 〈 如 一 个 画廊 
的 图 片 )， 逐 一 泻 染 图 像 模块 ， 但 其 中 的 数据 并 不 相同 。 必 须 使 用 的 数据 可 以 通过 Module 
对 象 直接 进行 传递 ， 而 不 是 让 模块 自己 作为 键 的 索引 从 条 目 中 取出 : 












































<figure class="image"> 
<img src="" alt=""/> 


<figcaption> 
<p></p> 
</figcaption> 


</figure> 


15.4 转译 视图 模型 


在 定义 好 顶层 的 数据 结构 后 ， 现 在 需要 定义 这 些 对 象 的 内 部 结构 。C# 是 强 类 型 的 语言 ， 
因此 不 能 在 松散 的 JavaScript 风格 中 任意 地 传递 这 些 C# 的 动态 对 象 。 每 个 视图 模型 都 需要 
严格 定义 属性 和 属性 各 自 对 应 的 类 型 。 由 于 想 让 前 端 负责 视图 模型 的 设计 工作 ， 因 此 我 们 
决定 使 用 JavaScript 来 编写 视图 模型 。 这 样 做 还 能 够 让 前 端 团 队 的 成 员 可 以 轻松 地 测试 模 
板 的 渲染 (例如 ,使 用 一 个 简单 的 Express 开发 应 用 )， 而 无 须 将 其 整合 到 .NET 后 端 。 
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JavaScript 构造 国 数 可 以 用 来 定义 与 类 相似 的 对 象 的 结构 ， 其 中 的 默认 值 可 以 用 于 推断 








以 下 是 我 们 应 用 中 一 个 典型 的 JavaScript 视图 模型 ， 它 描述 了 一 个 Bundle 并 继承 自 另 一 个 
名 为 Product 的 模型 ; 











var Bundle = function() { 
Product.apply(this); 
this.Title 证 
this.Director 
this.Synopsis 
this .Artwork 
this.Trailer 


new Image(); 
new Video(); 


this.Film new Video(); 
this .Extras [new Extra()]; 
this.IsNew false; 

}; 





在 显示 或 隐藏 某 些 特定 元 素 前 ， 模 板 经 常 需要 检查 多 个 数据 块 。 然 而 ， 为 了 保持 模板 的 简 
洁 ，Handlebars 中 的 姓 f 语句 只 能 判断 一 个 属性 。 而 且 ， 如 果 没 有 自 定义 的 辅助 函数 ， 那 
么 也 是 不 能 进行 比较 的 ， 在 我 们 的 示例 中 ， 代 码 就 会 变 得 重复 。 虽 然 更 复杂 的 逻辑 可 以 通 
过 岁 套 逻辑 语句 来 实现 ， 但 这 样 创建 出 的 模板 可 读 性 差 、 难 以 维护 ， 而 且 违背 了 无 逻辑 模 
板 的 哲学 。 我 们 需要 决定 在 哪里 放置 这 些 附加 逻辑 ， 从 而 更 加 符合 我 们 的 情况 。 








多 亏 ES5 JavaScript 提供 了 “getter” 功 能 ， 我 们 可 以 轻松 地 向 构造 函数 中 添加 动态 计算 的 
属性 值 ， 事 实证 明 ， 这 是 最 适合 进行 更 复杂 运算 和 比较 的 场所 。 

以 下 代码 是 视图 模型 中 一 个 动态 的 ES5 getter 属性 ， 这 个 属性 会 从 相同 的 模型 中 计算 两 个 
其 他 的 属性 : 





var Bundle = function() { 


this.Trailer = new Video(); 
this.IsNew = false; 


Object.defineproperty(this, 'HasWatchTrailerBadge', { 
get: function() { 
return this.IsNew && this.Trailer !== null; 
} 
})); 
}; 
现在 我 们 已 经 定义 好 了 所 有 的 视图 模型 ,其 中 包括 了 带 类 型 的 属性 和 getter。 但 问题 仍然 
在 一 一 它们 仅 存 在 于 JavaScript 中 。 我 们 想到 的 第 一 种 方法 是 ， 在 C# 中 手动 重 写 一 遍 所 有 
的 视图 模型 ， 但 我 们 很 快意 识 到 这 属于 重复 劳动 ， 而 且 也 不 好 扩展 。 我 们 觉得 只 要 有 合适 
的 工具 ， 就 可 以 自动 化 这 个 过 程 。 能 否 通 过 茶 种 方式 将 我 们 的 JavaScript 构造 函数 “转译 ” 
为 C# 中 的 类 呢 ? 
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我 们 决定 创建 一 个 简单 的 Node.js 应 用 来 完成 这 项 工作 。 通 过 使 用 枚 举 、 类 型 检查 和 原型 
继承 ,我 们 可 以 为 每 一 个 构造 函数 创建 描述 性 的 “清单 文件 ”"。 这 些 清单 中 的 信息 包括 类 
的 名 称 以 及 继承 于 哪个 类 (如 果 有 的 话 )。 在 属性 的 层次 ， 它 们 则 包括 了 所 有 属性 的 名 称 
和 类 型 ， 以 及 属性 是 否 为 getter， 如 果 是 getter， 则 包括 getter 的 计算 方式 是 什么 ， 以 及 返 
回 值 的 类 型 。 
























































当 每 个 视图 模型 被 解析 为 清单 文件 后 ， 数 据 就 可 以 放置 在 C# 类 的 Handlebars 模板 中 了 
(似乎 有 点 讽刺 )。 现 在 你 拥有 了 一 系列 可 在 后 端 生产 环境 中 使 用 的 的 .cs 文件 ， 每 个 文件 
都 描述 了 一 个 特定 的 视图 模型 。 











以 下 是 同一 个 Bundte 视图 模型 转译 为 C# 的 版 本 : 








namespace Colony.Website.Models 


public class Bundle : Product 
{ 
public string Title { get; set; } 
public string Director { get; set; } 
public string Synopsis { get; set; } 
public Image Artwork { get; set } 
public Video Trailer { get; set; } 
public Video Film { get; set; } 
public List<Extra> Extras { get; set; } 
public Boolean IsNew { get; set; } 
public bool HasWatchTrailerBadge 
{ 
get 
{ 
return this.IsNew && this.Trailer != null; 
} 
} 
} 
} 





值得 注意 的 是 ， 我 们 的 转译 器 功能 有 限 ， 只 能 简单 地 将 一 个 JavaScript 构造 函数 转换 为 C# 
类 。 它 不 能 将 任意 的 JavaScript 代码 转换 成 等 价 的 C# 代码 ， 这 是 一 项 复杂 无 比 的 任务 。 


15.5 布局 


我 们 需要 一 种 定义 方式 ， 即 需要 为 某 个 特定 视图 泻 染 哪些 模块 ， 以 及 通过 什么 方式 进 


行 演 染 。 


























如 果 让 视图 控制 器 负责 这 项 工作 ， 那 么 模块 的 列表 以 及 任何 附带 的 逻辑 都 需要 在 C# 和 
JavaScript 中 重复 编写 。 为 了 避免 这 种 重复 ， 我 们 想 要 使 用 一 个 JSON 文件 来 表示 每 一 个 视 
图 (例如 ， 以 下 的 示例 描述 了 首页 的 一 个 可 能 布局 )， 并 且 该 文件 可 以 在 前 后 端 之 间 共 享 : 
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"Head " ， 
"Header " ， 
"NeLcome " ， 
"FilmCollection", 
"SignUpCta", 
"Footer", 
"Foot" 

] 


虽然 按照 特定 顺序 列 出 模块 的 名 称 很 简单 ， 但 我 们 还 想 在 特定 条 件 下 选择 性 地 渲染 茶 些 组 
件 。 例 如 ， 当 用 户 登 录 时 才 泻 染 用 户 侧 边栏 。 


我 们 从 Handlebars 有 限 的 逻辑 集合 ( 炉 f、#unless 和 #each) 中 获得 了 灵感 。 我 们 意识 到 ， 
通过 引用 上 述 提 到 的 全 局 数据 结构 中 的 属性 ， 可 以 利用 JSON 来 表达 我 们 需要 的 所 有 内 容 : 








[ 
{ 
"Name": "UserSidebar", 
If": ["User.IsSignedIn"] 
]， 
{ 
"Name": "Modal", 
If": ["ViewState.IsTrailerOpen"], 
"Import": "Entry.Trailer" 
} 
] 


重组 布局 的 格式 后 ， 我 们 就 有 能 力 表达 简单 的 逻辑 并 将 任意 数据 导入 模块 。 需 要 注意 的 
是 ，if 语句 会 接收 一 个 数组 ， 从 而 允许 判断 多 个 属性 值 。 


我 们 开始 进一步 研究 如 何 通 过 这 种 格式 来 描述 更 复杂 的 视图 结构 ， 让 模块 可 以 岂 套 在 
其 他 模块 中 : 




















[ 
{ 
"Name": "TabsNav", 
"Unless": ["Entry.UserAccess.IsLocked"] 
]， 
{ 
"Name": "TabContainer", 
"Unless": ["Entry.UserAccess.IsLocked"] 
"Modules": [ 
{ 
"Name": "ExploreTab", 
If": ["ViewState.IsExploreTabActive"], 
"Modules": [ 
{ 
"Name": "Extra", 
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"ForEach": "Entry.Ext 


ras" 


} 
] 
}, 
{ 
"Name": "AboutTab", 
"If": ["ViewState.IsAboutTabActive"] 
} 


] 


这 种 表示 般 套 模块 的 能 力 允 许 我 们 可 以 完全 自由 地 实现 标记 的 构建 。 





现在 我 们 已 经 拥有 了 一 种 强大 的 格式 ， 可 以 描述 布局 和 视图 
辑 。 在 此 之 前 ， 无 论 使 用 JavaScript 还 是 C# 来 编写 这 个 逻辑 ， 都 需要 繁琐 和 容易 日 





动 复制 。 


15.6 页面 生成 器 





的 结构 ， 并 实现 相当 多 的 还 





H 错 的 手 


要 想 在 任何 一 端 获 得 最 终 膏 染 的 HTML， 我 们 需要 取得 模板 、 布 局 和 数据 ， 并 将 它们 整合 


在 一 起 以 生成 视图 。 








我 们 对 这 部 分 功能 达成 了 一 致 的 观点 ， 这 些 功能 需要 重复 ， 分 别 具 备 C# 和 JavaScript 的 版 
本 。 我 们 为 一 个 类 设计 了 规格 ， 并 称 之 为 “页 面 生 成 器 *， 这 个 类 负责 遍历 一 个 给 定 的 布 


局 文件 ， 按 照 布局 文件 中 的 条 件 和 每 个 模块 各 自 的 数据 来 泻 染 模块 ， 最 后 返 











的 HTML 字符 串 。 























因为 需要 密切 关注 这 两 种 语言 的 实现 确实 返回 了 相同 的 输 
两 个 版 本 的 页 面 生成 器 都 作为 分 组 编程 练习 ， 从 而 让 整个 开发 








后 端 团 队 成 员 互相 学 习 对 方 技术 的 一 个 好 机 会 。 





15.7 前端 SPA 











回 一 个 被 泻 染 


bb ， 所 以 我 们 将 C# 和 JavaScript 
团队 参与 进来 ， 这 也 是 让 前 


我 们 开发 团队 的 文化 一 直 是 尽 可 能 地 构建 自 研发 的 技术 。 当 谈 到 SPA 时 ， 我 们 可 以 选择 使 
也 可 以 选择 构建 自己 的 框架 。 我 们 已 经 
处 理 完 模板 ， 且 和 覆盖 API 层 的 全 局 数据 结构 也 有 效 地 形成 了 应 用 的 状态 ， 接 下 来 我 们 仍然 
需要 一 些 组 件 来 管理 路 由 、 数 据 绑 定 和 UI。 我 们 一 直 坚 信 “ 非 侵入 式 的 ”JavaScript 的 概 





用 Angular、Backbone 或 Ember 这样 现成 的 框架 ， 









































念 ， 因 此 Angular 中 模糊 HTML 与 JavaScript 界 民 

















民 (包括 现在 React 的 JSX 也 是 女 




















[此 ) 这 


样 的 用 法 是 我 们 想 要 避免 的 。 我 们 也 意识 到 ， 如 果 尝 试 在 非常 独特 的 架构 上 强行 套用 一 个 




















框架 ， 那么 将 会 导致 二 次 修改 ， 也 会 使 框架 出 现 大 量 的 元 余 。 因 此 ， 我 们 决定 构建 自己 的 





解决 方案 ， 并 且 清 晰 地 规定 了 几 个 原则 : 首先 ，UI 行为 不 应 该 和 特定 的 标记 紧 耦 合 ， 甚 
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次 ， 应 用 状态 变化 的 组 合 及 在 模板 与 布局 中 已 经 定义 好 的 Handlebars 逻辑 应 该 足以 使 网 页 
上 的 任何 元 素 在 任何 时 间 都 能 够 重新 泻 染 。 








Et 














我 们 达成 的 解决 方案 不 仅 非常 轻 量 级 ， 而 且 非 常 模块 化 。 在 最 底层 ， 从 服务 器 端 取 得 状态 
与 完整 泻 染 的 视图 ， 在 这 里 我 们 可 以 让 任意 的 标记 块 “ 订 阅 ” 状 态 的 变化 。 这 些 变化 通 
DOM 事件 触发 ， 我 们 发 现 这 比 Angular 这 样 的 digest 循环 或 者 各 种 试验 性 的 “可 观测 ” 实 
现 的 性 能 要 强大 得 多 。 当 改变 发 生 时 ， 那 部 分 DOM 结构 会 被 重新 谊 染 并 替换 。 最 近 我 们 
放心 地 发 现 ， 其 基本 原理 和 越 来 越 流 行 的 Redux 库 几 乎 是 一 致 的 。 


注 























往 上 一 层 ， 我 们 的 UI“ 行 为 ”和 这 个 过 程 是 完全 分 离开 的 ， 这 有 效 地 逐步 增强 了 任意 标记 
块 。 例 如 ， 我 们 可 以 将 相同 的 “请 块 ”UI 行为 应 用 到 各 种 不 同 的 组 件 中 ， 但 每 个 组 件 却 可 
以 有 完全 不 同 的 标记 ， 即 一 种 情况 可 以 是 电影 列表 ， 而 另 一 种 可 以 是 新 闻 引 用 列表 。 























在 最 高 层次 ，History API 通过 拦截 所 有 路 由 点 击 来 提供 路 由 功能 ， 并 确定 结果 视图 需要 用 
到 哪些 布局 文件 。 在 通过 服务 器 端 REST API 传递 的 、 形 成 应 用 状态 的 数据 的 基础 之 上 ， 
我 们 决定 扩展 这 个 API， 以 提供 模块 模板 与 JSON 布局 。 这 样 做 可 以 确保 这 些 共享 资源 只 
存在 于 一 个 地 方 (服务 器 ) ， 从 而 减少 前 端 与 后 端 资源 出 现 分 歧 的 风险 。 




















15.8 “最终 架构 


图 15-1 的 示意 图 展示 了 初始 的 服务 器 端 请 求 与 后 续 所 有 的 客户 端 请 求 的 完整 生命 周期 ， 其 
中 包括 它们 各 自用 到 的 组 件 。 




























JS 视图 
控制 器 











15-1: 初始 的 服务 器 端 请 求 与 后 续 的 客户 端 请 求 的 生命 周期 
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15.9 后续 计划 


尽管 在 应 用 中 共享 这 些 不 同 的 组 件 已 经 大 大 减少 了 重复 代码 ， 但 依然 存在 一 些 重复 的 情 
况 ， 比 如 控制 器 和 路 由 。 然 而 ， 根 据 我 们 处 理 布局 文件 的 经 验 ， 为 什么 路 由 与 各 自 对 应 的 
控制 器 不 能 通过 共享 JSON 文件 的 方式 来 表达 ， 然 后 交 给 轻 量 级 的 解释 器 进行 解析 ， 从 而 
得 到 C# 和 JavaScript 版 本 的 实现 呢 ? 























虽然 一 些 解 决 方案 已 经 实现 了 使 用 非 JavaScript 引擎 (如 ReactJS.NET 和 React-PHP-V8]JS) 
来 泻 染 Angular 应 用 或 React 组 件 ， 但 因为 ASP.NET 生态 系统 缺乏 特定 的 依赖 框架 ， 所 以 
我 们 的 解决 方案 依然 是 唯一 的 。 在 解决 方案 的 开发 过 程 中 ， 虽 然 我 们 的 后 端 团 队 确 实 编写 
了 一 些 附 加 代码 〈 如 页 面 生成 器 ) ， 但 他 们 的 数据 服务 、 控 制 器 以 及 应 用 逻辑 或 多 或 少 是 
未 有 变化 的 。 由 于 解 耘 ， 前 端 UI 代码 可 以 从 后 端 中 分 离 出 来 ， 从 而 让 后 端 应 用 变 得 精简 
而 目标 明确 。 虽 然 我 们 的 应 用 在 某 种 意义 上 是 “ 同 构 的 ”， 但 其 同时 也 是 划分 整齐 、 关 广 
点 分 离 的 。 



































我 们 猜测 还 有 很 多 其 他 的 开发 团队 像 我 们 一 样 渴望 着 同 构 应 用 带 来 的 优势 ， 同 时 又 受 困 于 
后 端 技术 的 选择 ey 在 这 些 情况 下 ， 公 司 早期 作出 的 
决定 很 可 能 会 对 产品 架构 造成 根深 蒂 固 的 影响 ， 并 影响 开发 团队 的 组 成 结构 。 我 们 的 解决 
方案 表明 ， 同 构 的 原则 可 以 适用 于 任何 技术 栈 ， 既 不 需要 引入 一 个 可 能 在 一 年 内 就 被 淘汰 
的 前 端 框架 上 的 依赖 ， 也 无 须 从 头 开始 重 构 整 个 应 用 。 希 望 其 他 团队 可 以 从 我 们 的 经 验 中 
获得 灵感 。 我 们 期 待 可 以 在 未 来 看 到 一 系列 的 技术 加 入 到 同 构 应 用 中 。 
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结语 


= 口 





Charlie Robbins 
“我 不 知道 世人 如 何 看 待 我 ， 但 我 觉得 自己 像 是 在 海边 玩 要 的 孩子 ， 只 
到 了 一 枚 比较 光滑 的 卵石 或 一 只 比较 好 看 的 贝壳 ， 而 展现 在 我 面前 的 是 
探 明 的 真理 之 海 。 


是 偶尔 拾 
这 
元 


完全 未 被 


一 艾 萨 克 . 牛 疾 


2009 年 10 月 前 ， 我 还 没有 专业 地 编写 过 JavaScript。 准 确 来 说 ， 我 儿 乎 没 花 过 多 少时 间 在 
这 门 语 言 上 。 当 时 我 主要 是 使 用 微软 的 WPF (Windows Presentation Foundation ) 技术 编写 
交易 系统 的 前 端 界面 以 及 其 他 的 银行 软件 。 如 果 你 在 那 时 告诉 我 ,“ 同 构 JavaScript” 将 会 
成 为 一 种 广泛 使 用 的 概念 ， 我 肯定 会 嘻 之 以 鼻 。 通 过 强调 这 些 事 实 ， 我 想 提醒 你 的 是 ， 在 
进行 尝试 以 前 ， 你 真 的 不 知道 未 来 可 能 发 生 什么 。 


16.1 设计 模式 、Flux 和 同 构 JavaScript 家 族 


在 我 原本 的 博文 “Scaling Isomorphic Javascript Code” (https://blog.nodejitsu.com/scaling- 
isomorphic-javascript-code/) 中 ， 同 构 JavaScript 并 不 是 主要 的 话题 。 在 那 时 ， 这 个 术语 
仅仅 是 一 个 脚注 说 明 ， 为 的 是 证 明 我 的 想法 是 一 个 更 加 有 影响 力 的 软件 设计 模式 。 开 发 
者 采用 术语 和 抽象 概念 的 方式 远 远 超过 了 任何 具体 的 软件 设计 模式 。 


软件 设计 模式 的 发 展 方式 有 点 类 似 于 宗教 : 每 种 模式 的 核心 思想 都 有 多 种 解释 ， 这 可 能 会 
导致 各 教派 的 特征 千差万别 。 当 然 ， 在 软件 设计 模式 中 ， 一 个 教派 实际 上 只 是 模式 的 另 一 
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种 具体 实现 。 我 将 这 种 原则 称 为 “设计 模式 家 族 ” 原 则 。 我 们 以 MVC 模式 (Model-View- 
Controller， 模 型 -视图 - 控制 器 ) 为 例 ， 它 可 以 说 是 一 直 以 来 最 流行 的 设计 模式 了 。MVC 
的 原始 实现 诞生 于 施乐 帕克 研究 中 心 的 SmallTalk 程序 语言 ， 它 与 如 今 Ruby on Rails 中 类 
以 于 Model2 的 MVC 实现 很 少 有 相似 之 处 。 这 些 差异 主要 是 因为 Ruby on Rails 是 一 个 基 
于 服务 器 的 框架 ， 而 原始 的 MVC 实现 的 关注 点 是 前 端的 桌面 图 形 用 户 界面 。 
































看 对 日 益 增 长 的 同 构 JavaScript， 设 计 模式 与 软件 架构 都 需要 发 展 。 实 践 表明 ， 自 从 Flux 
模式 家 族 出 现 ， 同 构 JavaScript 和 单 向 不 可 变数 据 流 的 这 种 转变 验证 了 “设计 模式 家 族 ” 
的 原则 。Flux 产生 了 大 量 的 实现 ， 其 中 大 部 分 的 实现 是 同 构 的 。 这 些 实现 的 普及 和 它们 
同时 支持 客户 端 与 服务 器 端 演 染 是 相关 的 。React、Flux 以 及 Redux 这 样 的 流行 实现 的 兴 
起 验证 了 同 构 JavaScript 的 重要 性 。 事 实 上 ，Redux 的 作者 关于 这 个 问题 有 着 自己 的 看 法 
(https:/medium.com/@mjackson/universal-javascript-4761051b7ae9#.h655sp39b)。 

















16.1.1 永远 相信 JavaScript 


自 2011 年 10 月 起 ， 在 我 第 一 次 提出 同 构 JavaScript 后 ，JavaScript 就 遍地 开花 了 。 如 果 将 
npn 模块 的 数量 作为 增长 的 指标 ， 那 么 从 2011 年 年 末 到 2016 年 年 中 ，JavaScript 取得 了 高 
达 50 倍 的 增长 。 回 过 头 来 看 ， 这 是 一 个 惊人 的 数据 ， 更 为 惊人 的 是 ，JavaScript 的 增长 并 
没有 显现 出 放 缓 的 迹象 。 

















JavaScript 的 创造 者 Brendan Eich 曾经 讲 过 一 句 经 典 的 话 : 永远 相信 JavaScript。 现 在 
看 来 确实 如 此 。JavaScript 在 今天 几乎 无 处 不 在 ， 为 不 同 的 平台 、 设 备 及 终端 提供 支持 。 
JavaScript 在 手机 、 无 人 机 和 汽车 中 运行 ， 还 帮助 NASA 跟踪 宇航 服 ， 而 我 现在 使 用 的 文 
本 编辑 器 也 是 使 用 JavaScript 编写 的 。 
































比 JavaScript 的 使 用 率 发 展 更 为 迅猛 的 是 JavaScript 的 开发 方式 。2011 年 ， 第 一 个 JS-to-JS 
式 的 编译 器 (或 称 为 转译 器 ) Traceur 由 Alex Russell 在 JSConf (https://www.youtube.com/ 
watch?v=ntDZa7ekFEA&t=1m42s) 发 布 ， 并 被 称 为 “一 个 有 有 效 期 的 工具 ”。Traceur 和 
npm、browserify 和 webpack 这 样 的 JavaScript 工具 让 转译 功能 得 到 了 广泛 使 用 ， 且 使 用 方法 
比 之 前 简单 多 了 。 编 写本 章 时 恰 着 ES6/ES2015 的 规范 定稿 。 














这 些 因 素 结合 起 来 英 定 了 现代 JavaScript 开发 的 基石 。 其 思想 是 ， 在 浏览 器 执行 JavaScript 
代码 前 ， 总 是 先 轻松 地 运行 babel 这 样 的 转译 器 ， 并 且 以 一 种 快速 、 渐 进 的 方式 采用 
ES201{5,6,7...} 的 功能 。 








当然 了 ,“ 总 是 ”是 离 不 开 “ 轻 松 ” 的 ， 而 变 得 轻松 要 经 历 一段 发 展 。 采 用 npnm 作为 工作 流 的 
工具 可 以 使 得 管理 JavaScript 语言 工具 更 为 轻松 。 当 必须 在 react 和 JSX 这 样 的 框架 中 使 用 转 
译 时 ， 拥 有 易于 使 用 的 语言 工具 将 会 使 得 “使 用 转译 器 ”这 一 想法 变 得 没 那 么 令 人 厌恶 。 


这 就 为 同 构 JavaScript 创造 了 一 个 令 人 难以 置信 的 友好 环境 。 考 虑 以 下 场景 : 当 一 个 库 不 
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能 完全 适合 你 的 应 用 环境 或 者 语义 时 ， 在 这 些 普遍 存在 的 工具 链 出 现 之 前 ， 你 是 不 能 使 用 
这 个 库 的 ， 但 现在 你 的 转译 和 打包 的 工具 链 通 常 可 以 帮助 你 将 这 个 要 求 变 为 可 能 。 








其 他 一 些 激动 人 心 的 特性 即将 出 现 。WebAssembly (简称 wasm) 是 一 项 适用 于 Web 编译 
的 、 可 移植 的 、 体 积 紧 竣 且 加 载 高 效 的 格式 。 它 为 许多 语言 创造 了 一 个 可 行 的 编译 目标 ， 
更 重要 的 是 ， 在 那些 语言 中 建立 了 良好 的 项 目 。WebAssembly 承诺 的 愿景 将 会 超越 同 构 
JavaScript， 为 通用 的 同 构 代码 提供 看 似 无 尽 的 可 能 性 。 


16.1.2 命名 与 理解 

最 后 ， 我 想 讨论 一 下 我 经 常 被 开发 者 问 到 的 几 个 问题 。 第 一 个 问题 是 ， 为 什么 要 构造 “ 同 
构 ” 这 个 新 术语 ? 这 个 新 术语 的 含义 其 实 十 分 明显 ， 就 是 在 客户 端 与 服务 器 端 运行 同一 份 
代码 。 我 给 出 的 答案 很 简单 : 因为 还 没有 一 个 专门 的 词 来 描述 它 。 还 有 人 问 我 ， 为 什么 这 
个 词 是 源 于 一 个 数学 概念 ? 虽然 我 知道 自己 的 答案 多 少 有 些 和 争议 性 ， 但 对 我 来 说 却 是 显然 
的 : 因为 前 端的 构建 系统 以 及 最 近 以 来 的 转译 器 代表 了 我 认为 的 “ 同 构 ”理念 。 















































iso .mor .phic (形容 词 ) 

(1) 

a. 形式 、 形 状 和 结构 相等 或 相似 

b. 在 规模 和 形状 中 可 能 存在 相似 的 孢子 体 和 配子 体 世 代 
(2) 和 同 构 相关 的 


最 近 ， 我 更 频繁 地 被 问 及 “ 同 构 JavaScript” 与 “通用 JavaScript” 之 间 的 辩论 。 要 想 客 观 
地 探讨 这 一 问题 ， 则 需要 再 次 回顾 本 书 的 第 2 章 与 第 3 章 。 同 构 JavaScript 图 谱 展 示 了 在 
开发 与 构建 同 构 JavaScript 应 用 时 复杂 程度 的 分 类 。 同 构 JavaScript 三 个 不 同 的 分 类 展示 了 
依据 复杂 度 与 环境 来 调整 JavaScript 的 三 个 等 级 。 




















。 与 环境 无 关 的 JavaScript 可 以 “到 处 ”运行 ， 无 须 修改 。 
。 只 有 当 环境 本 身 被 修改 后 ,为 每 个 环境 提供 shim 的 JavaScript 才能 在 不 同 的 环境 中 运行 。 
。 使 用 shim 后 语义 的 JavaScript 可 能 需要 修改 环境 或 者 在 不 同 环境 中 的 行为 略 有 不 同 。 


如 果 “ 通 用 JavaScript” 指 的 是 不 需要 修改 代码 或 环境 就 可 以 实现 重 构 ， 那 么 与 环境 无 关 的 
JavaScript 显然 是 通用 的 。 因 此 ， 当 需要 修改 代码 本 身 或 运行 环境 时 ， 代 码 就 不 再 是 通用 
的 了 ， 而 更 加 趋向 于 同 构 化 (如 图 16-1 所 示 )。 

















与 环境 无 关 的 为 每 个 环境 进行 shim 被 shim 后 的 语义 





更 加 通用 化 二 一 一 一 一 一 一 一 一 更 加 同 构 化 


因 谱 


























图 16-1: 通用 与 同 构 JavaScript 图 谱 
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当 我 们 将 图 谱 和 分 类 结合 起 来 ， 问 题 就 从 “这 是 同 构 JavaScript 还 是 通用 JavaScript? ” 变 
成 了 “这 段 JavaScript 是 更 偏向 于 同 构 化 还 是 更 偏向 于 通用 化 ? ”这 种 解释 比 我 原来 对 同 
构 JavaScript 的 定义 更 有 技术 性 ， 也 更 为 细致 : 


同 构 意 味 着 给 定 任 意 行 数 的 代码 (除了 某 些 特例 ) 都 可 以 在 客户 痛 和 服务 
器 到 执行 。 


这 也 说 明了 一 个 关键 点 ， 即 对 这 些 术语 的 辩论 和 解释 是 无 止境 的 ， 但 这 在 很 大 程度 上 来 说 
却 是 不 重要 的 。 例 如 ， 让 无 处 不 在 的 JavaScript 开发 者 感到 惧怕 的 是 ， 我 可 以 提出 自 同 构 
(automorphism) 这 一 术语 ， 它 指 的 是 “ 源 和 目标 一 人 致 的 同 构 ”。 根 据 这 一 点 ， 我 们 可 以 推 
断 出 “ 自 同 构 JavaScript” 是 “通用 JavaScript” 的 另 一 种 说 法 ， 因 为 其 代码 在 所 有 环境 中 
都 是 相同 的 。 这 个 新 术语 不 会 对 这 一 主题 的 共同 理解 产生 任何 实际 价值 ， 只 会 进一步 混淆 
一 个 简单 (尽管 是 微妙 的 ) 的 想法 。 









































在 这 时 候 ， 你 可 能 会 问 自己 ,“ 技 术 上 的 细微 差别 对 我 们 开发 者 来 说 不 是 很 重要 吗 ?” 虽 
然 技术 开发 中 总 是 不 会 缺乏 细微 的 差别 ， 但 开发 者 不 应 该 将 关注 点 放 在 一 个 新 术语 或 者 不 
同 术语 的 争论 上 。 开 发 者 应 当 将 重点 放 在 利用 自己 的 理解 〈 无 论 对 错 ) 来 做 一 些 有 趣 或 创 
新 的 事情 。 我 们 对 于 所 有 事情 的 共同 理解 都 是 在 不 断 变化 的 ， 其 中 包括 JavaScript。 所 有 
的 代码 城 保 最 终 都 将 被 淘汰 ， 而 我 则 期 待 看 着 它们 坠 入 大 海 。 
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关于 作者 


Jason Strimpel 是 WalmartLabs 平台 团队 的 一 名 资深 软件 工程 师 ， 专 门 从 事 UI 层 的 开发 。 
Jason 拥有 12 年 构建 Web 应 用 的 经 验 。 大 约 在 三 年 前 ， 他 开始 专注 于 前 冯 领 域 ， 尤 其 是 
JavaScript。 从 那 时 起 ， 他 开始 和 一 些 组 件 库 及 框架 打交道 。 然 而 ， 在 提出 一 些 独 特 的 、 有 具 
有 挑战 性 的 UI 需求 时 ，Jason 发 现 这 些 库 具 有 局 限 性 ， 因 此 他 开始 开发 自己 的 定制 组 件 与 
辅助 工具 目录 。 他 是 一 个 极 具 热 情 的 开发 者 ， 但 缺乏 幽默 感 ， 喜 欢 在 构建 丰富 的 UI 时 简 
化 复杂 度 。 


Maxime Najim 是 一 名 软件 架构 师 ， 同 时 也 是 一 名 全 栈 Web 开发 者 。 他 曾 任职 于 Yahool、 
苹果 和 Netflix， 在 创建 大 型 的 、 伸 缩 性 强 的 、 可 靠 的 Web 应 用 方面 具有 丰富 的 经 验 。 目 
前 ， 他 正 专注 于 设计 并 实现 Walmart 全 球 电 商 平 台 的 新 系统 与 新 框架 。 


关于 封面 

本 书 封面 上 的 动物 是 灰 树 蛙 (Hyla versicolor)， 是 北美 洲 中 东部 的 一 种 小 型 蛙 类 。 灰 树 蛙 
因 在 树木 栖息 且 身 体 的 主要 颜色 为 灰色 而 得 名 。 不 过 ,正如 它 的 学 名 所 示 ， 灰 树 蛙 可 以 从 
灰色 变 为 绿色 ， 就 像 变 色 龙 一 样 。 这 种 伪装 能 力 可 以 用 于 躲避 天 敌 。 

灰 树 蛙 的 分 布 范围 非常 广泛 ， 在 美国 境内 ， 南 至 得 克 萨 斯 州 ， 北 至 新 不 伦 瑞 克 ， 均 可 找到 
它们 。 除 了 交配 时 ， 灰 树 蛙 一 般 很 少 离开 树 上 的 家 。 灰 树 蛙 体 长 约 两 英寸 ( 约 5 厘 米 )， 
皮肤 粗糙 ， 表 面 有 疯 ， 与 效 内 类 似 (因此 得 名 为 “多 变 的 北 内 ") 。 主 要 的 食物 为 昆 由 ， 如 
皮 蜂 、 昨 旺 和 妈 蚁 。 


灰 树 蛙 的 生存 没有 受到 什么 重大 的 威胁 ， 种 群 数量 被 认为 是 稳定 的 。 友 树 蛙 有 时 会 被 当 作 
宠物 饲养 ， 寿 命 为 5S~10 年 。 
O’"Reilly 封面 上 的 许多 动物 都 已 濒临 灭绝 ， 但 它们 的 存在 对 世界 至 关 重 要 。 想 要 了 解 如 何 
帮助 它们 ， 可 以 登录 animals.oreilly.com。 











封面 图 片 来 自 Wood 的 著作 Tllustrated Natural History。 
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《JavaScript 高 级 程序 设计 
(第 3 版 )》 


JavaScript 
高 级 程序 设计 


(第 3 版 ) 





令 一 幅 浓墨重彩 的 语言 画卷 ， 一 部 推陈出新 的 技术 名 著 
令 全 能 前 端 人 员 必 读 之 经 典 ， 全 面 知识 更 新 必 备 之 佳作 


《JavaScript 编程 精粹 》 
A Me Dp. 作者 : Ved Antani 
JavaScript 


编程 精粹 


Mastering JavaScript 


译 者 : 门 佳 





令 掌握 JavaScript 基 础 知识 要 点 及 其 现代 技术 和 工具 ， 用 正 
确 的 编码 风格 开发 Web 应 用 
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ma 2 | 《你 不 知道 的 JavaScript 
mm | (中 卷 )》 
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JavaScript.s 作者 : Kyle Simpson 


译 者 : 单 业 、 姜 南 
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令 ”深入 挖掘 JavaScript 语 言 本 质 ， 简 练 形象 地 解释 抽象 概念 ， 
打通 JavaScript 的 任 督 二 脉 








《学 习 JavaScript 数据 结构 
与 算法 (第 2 版 )》 


作者 : Loiane Groner 


2 
数据 结构 与 算法 陈 迪 、 喜 源 





























令 用 JavaScript 学 习 常用 的 数据 结构 和 算法 ， 高 效 解决 计算 
机 科学 中 的 常见 问题 
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4 直面 当前 JavaScript 开 发 者 不 求 甚 解 的 大 趋势 ， 深 入 理解 
语言 内 部 机 制 
令 同时 面向 JavaScript 语 言 初学 者 与 经 验 丰富 的 开发 人 员 
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JavaScript 作者 : Kyle Simpson 


译 者 : 单 业 
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令 ” 即 将 出 版 ， 敬 请 期 待 
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微 信 连 接 





回复 "JavaScript” 查 看 相关 书 单 
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同 构 JavaScript 应 用 开发 


被 誉 为 “Web 开 发 圣杯 ”的 同 构 JavaScript 正 在 改变 着 Web 应 用 的 开发 模 
式 ， 实 现在 浏览 器 客户 端 和 Web 应 用 服务 器 端 运行 相同 的 代码 。 通 过 阅 
读本 书 ， 你 将 逐步 了 解 这 种 应 用 架构 日 益 流行 的 原因 ， 学 会 如 何 构建 和 
维护 属于 自己 的 同 构 JavaScript 应 用 ， 并 将 其 应 用 于 解决 关键 业务 问题 。 


四 了 解 同 构 JavaScript 如 何 显著 提升 用 户 体 验 

目 定义 框架 和 应 用 之 间 的 合约 ， 响 应 资源 请 求 

曙 将 框架 和 应 用 代码 从 服务 器 端 传递 到 客户 端 ， 让 代码 库 变 为 同 构 
加 创建 常用 抽象 ， 获 取 和 设置 cookie， 重 定向 用 户 请 求 

曙 了 解 同 构 JavaScript 为 何 终 将 解决 富 服 务 器 端 和 富 客 户 端 之 争 

四 同 构 JavaScript 的 高 级 话题 ， 如 协作 性 的 实时 应 用 


Jason Strimpel， 软 件 工程 师 ， 拥 有 十 余年 Web 开 发 经 验 。 目 前 任职 于 


沃尔玛 实验 室 ， 负 责 支持 Ul 应 用 的 软件 开发 。 


Maxime Najim， 沃 尔 玛 实 验 室 软 件 架构 师 ， 全 栈 Web 开 发 者 。 曾 任职 
于 Netflix、 革 果 和 Yahool 等 公司 ， 在 创建 大 型 、 伸 缩 性 强 、 可 靠 的 
Web 应 用 方面 具有 丰富 经 验 。 
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封面 设计 : Randy Comer 张 健 
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“ 同 构 JavaScript 应 用 在 追求 速 


度 的 场景 中 表现 优异 。 对 于 任 
何 想 要 构建 新 型 高 性 能 Web 应 
用 的 人 来 说 ， 这 本 书 都 值得 一 
一 一 Alexander Grigoryan 
沃尔玛 全 球 电子 商务 应 用 

平台 软件 工程 总 监 


“本 书 内 容 详 实 、 结 构 清晰 、 讲 


清楚 。 作 者 以 新 鲜 的 视角 阁 
述 了 Web 应 用 架构 的 沿革 ， 详 
细 解 读 了 为 何 同 构 JavaScript 是 
Web 应 用 和 单 页 面 应 用 架构 的 
完美 结合 ， 以 及 它 区 别 于 简单 
地 在 客户 端 和 服务 器 端 分 享 代 
码 的 独到 之 处 。” 

一 一 Amazon 读 者 


ISBN 978-7-115-46868-0 
9 外 468680 > 


ISBN 978-7-115-46868-0 





图 灵 社 区 会 员 ChenyangGao(2339083510@qq.com) 专 享 妆 害 价 ; 49.00 元 


看 完了 


如 果 您 对 本 书 内 容 有 疑问 ， 可 发 邮件 至 contact@turingbook.com， 会 有 编辑 
或 作 译 者 协助 答疑 。 也 可 访问 图 灵 社 区 ， 参 与 本 书 讨 论 。 


如 果 是 有 关 电 子 书 的 建议 或 问题 ， 请 联系 专用 客服 邮箱 : 


ebook@turingbook.com。 
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